<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="js,">










<meta name="description" content="&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; JavaScript 是属于 HTML 和 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 下面是关于JavaScript学习笔记，未完善，内容较乱">
<meta name="keywords" content="js">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript学习笔记">
<meta property="og:url" content="https://shellingfordly.gitee.io/2019/09/29/javascript学习笔记/index.html">
<meta property="og:site_name" content="shelllingfordly">
<meta property="og:description" content="&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; JavaScript 是属于 HTML 和 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 下面是关于JavaScript学习笔记，未完善，内容较乱">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://7n.w3cschool.cn/attachments/image/20170619/t_document.png">
<meta property="og:image" content="https://shellingfordly.gitee.io/uploads/images/lean/js/1.jpg">
<meta property="og:image" content="https://7n.w3cschool.cn/attachments/image/20170619/t_insertAdjacentHTML.png">
<meta property="og:updated_time" content="2019-10-10T07:15:07.680Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript学习笔记">
<meta name="twitter:description" content="&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; JavaScript 是属于 HTML 和 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 下面是关于JavaScript学习笔记，未完善，内容较乱">
<meta name="twitter:image" content="https://7n.w3cschool.cn/attachments/image/20170619/t_document.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://shellingfordly.gitee.io/2019/09/29/javascript学习笔记/">





  <title>JavaScript学习笔记 | shelllingfordly</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">shelllingfordly</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">人生本就是一场孤独的旅行</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-首页">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-归档">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-分类">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-标签">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-评论区">
          <a href="/comment" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-comment"></i> <br>
            
            评论区
          </a>
        </li>
      
        
        <li class="menu-item menu-item-关于我">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://shellingfordly.gitee.io/2019/09/29/javascript学习笔记/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shellingford ly">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/uploads/images/header.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="shelllingfordly">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">JavaScript学习笔记</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-09-29T20:42:35+08:00">
                2019-09-29
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/学习/" itemprop="url" rel="index">
                    <span itemprop="name">学习</span>
                  </a>
                </span>

                
                
                  ， 
                
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/学习/js/" itemprop="url" rel="index">
                    <span itemprop="name">js</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2019/09/29/javascript学习笔记/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2019/09/29/javascript学习笔记/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>次
            </span>
          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <span>
&nbsp;&nbsp;&nbsp;&nbsp;
JavaScript 是属于 HTML 和 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
下面是关于JavaScript学习笔记，未完善，内容较乱
</span>
<a id="more"></a>

<h2 id="变量的声明"><a href="#变量的声明" class="headerlink" title="变量的声明"></a>变量的声明</h2><h3 id="var"><a href="#var" class="headerlink" title="var"></a>var</h3><ul>
<li>声明所有的数据类型</li>
<li>变量什么都可以存</li>
</ul>
<h3 id="function"><a href="#function" class="headerlink" title="function"></a>function</h3><ul>
<li>专门用来声明函数</li>
<li>函数是一种变量</li>
<li>也是一个特殊的对象类型</li>
</ul>
<h4 id="有名函数"><a href="#有名函数" class="headerlink" title="有名函数"></a>有名函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;&#125;</span><br></pre></td></tr></table></figure>

<p><font color="red">注意：</font></p>
<blockquote>
<p>变量不一定是函数，但是函数名可以叫做变量<br>这里的fn可以叫 <code>函数fn</code> ，也可以叫 <code>变量fn</code></p>
</blockquote>
<h4 id="匿名函数"><a href="#匿名函数" class="headerlink" title="匿名函数"></a>匿名函数</h4><p>function (){}<br>直接这样写是会报错的，匿名函数必须付给某个对象（变量或者事件）</p>
<h4 id="函数的声明"><a href="#函数的声明" class="headerlink" title="函数的声明"></a>函数的声明</h4><ul>
<li><p>函数声明</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数表达式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="函数执行方式"><a href="#函数执行方式" class="headerlink" title="函数执行方式"></a>函数执行方式</h3><h4 id="函数自执行"><a href="#函数自执行" class="headerlink" title="函数自执行"></a>函数自执行</h4><p>定义就执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//&lt;1&gt;、</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    函数内容;</span><br><span class="line">&#125; ) ();</span><br><span class="line"><span class="comment">//&lt;2&gt;、</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    函数内容;</span><br><span class="line">&#125; () );</span><br><span class="line"><span class="comment">//&lt;3&gt;、+ - ~ !</span></span><br><span class="line">+ <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    函数内容;</span><br><span class="line">&#125; ();</span><br><span class="line">- <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    函数内容;</span><br><span class="line">&#125; ();</span><br><span class="line">~ <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    函数内容;</span><br><span class="line">&#125; ();</span><br><span class="line">! <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    函数内容;</span><br><span class="line">&#125; ();</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注：函数外不可访问函数内的内容</p>
</blockquote>
<h4 id="被动执行"><a href="#被动执行" class="headerlink" title="被动执行"></a>被动执行</h4><p>直接调用</p>
<h3 id="函数传参"><a href="#函数传参" class="headerlink" title="函数传参"></a>函数传参</h3><h4 id="对应传参"><a href="#对应传参" class="headerlink" title="对应传参"></a>对应传参</h4><p>传什么类型的东西形参都接收</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x,y</span>)</span>&#123; <span class="comment">//形参</span></span><br><span class="line">    a = x + y;</span><br><span class="line">    alert(a);</span><br><span class="line">&#125;</span><br><span class="line">fn( <span class="number">1</span>,<span class="number">1</span> );  <span class="comment">//实参</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">    a = x + y;</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="number">10</span>,<span class="number">20</span>);</span><br><span class="line">alert(a); <span class="comment">//a=30</span></span><br></pre></td></tr></table></figure>

<h4 id="任意传参"><a href="#任意传参" class="headerlink" title="任意传参"></a>任意传参</h4><ul>
<li>argunments – 类数组</li>
<li>argunments.length – 参数个数</li>
<li>argunments[index] – 访问每一个</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">a</span>)</span>&#123;</span><br><span class="line">    alert(a);</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>); <span class="comment">// a 为1</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert( <span class="built_in">arguments</span>.length );</span><br><span class="line">&#125;</span><br><span class="line">fn1(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>); <span class="comment">// 结果为4</span></span><br></pre></td></tr></table></figure>

<h4 id="return"><a href="#return" class="headerlink" title="return"></a>return</h4><p>默认函数返回值：undefined</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">undefined</span>; <span class="comment">//默认返回undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> x+y; <span class="comment">//不需要定义 a = x + y;</span></span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="number">1</span>,<span class="number">1</span>) <span class="comment">// 返回结果为2</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>注：</p>
<ul>
<li>alert(fn()); alert某个函数时,弹窗显示的是函数的返回值，即return后的内容</li>
<li>直接写 fn(); 是调用函数</li>
<li>函数return之后的内容不会执行</li>
</ul>
</blockquote>
<p>例1</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'ok'</span>);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">&#125;</span><br><span class="line">fn(); <span class="comment">//此时弹窗显示 ok</span></span><br><span class="line">alert(fn()); <span class="comment">//此时弹窗显示 ok，之后显示 undefined</span></span><br></pre></td></tr></table></figure>

<p>例2</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'fn的内容'</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;alert(<span class="string">'return的返回值'</span>)&#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 将fn整个内容付给a，a相当于fn，换个名字而已</span></span><br><span class="line"><span class="keyword">var</span> a = fn;</span><br><span class="line"><span class="comment">// 将fn的返回值付给a，并且此时fn()被执行，弹'fn的内容'</span></span><br><span class="line"><span class="comment">// 相当于 function a()&#123;alert('return的返回值')&#125;;</span></span><br><span class="line"><span class="keyword">var</span> a = fn();</span><br><span class="line"><span class="comment">// 弹'return的返回值'</span></span><br><span class="line">a();</span><br></pre></td></tr></table></figure>

<h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><p><code>作用范围，有效范围</code></p>
<ul>
<li><p>全局变量 – 直接在script标签下声明的变量</p>
</li>
<li><p>局部变量 – 所有的花括号都会形成单独的作用域</p>
</li>
</ul>
<blockquote>
<p><code>注：</code>在ES5中，for and if 的 {} 是不存在作用域的，只有函数存在作用域</p>
</blockquote>
<h4 id="全局域"><a href="#全局域" class="headerlink" title="全局域"></a>全局域</h4><p>全局变量：直接在script下声明的变量(即window的属性)</p>
<h4 id="局部域"><a href="#局部域" class="headerlink" title="局部域"></a>局部域</h4><p>局部变量：在函数内部声明的变量，任何一个函数在执行时就会开启一个局部域</p>
<h4 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h4><ol>
<li>内部变量会覆盖外部变量</li>
</ol>
<p>只要内部声明了和外部一样的<code>变量</code>，函数就不会到外部去找这个变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">'ok'</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 此时a为undefined，因为变量提升，a还没有值</span></span><br><span class="line">    alert( a );</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">123</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>就近原则</li>
</ol>
<p>只要是内部声明了和外部一样的<code>形参</code>或者<code>变量</code>，那么在函数内修改和访问的都是这个<code>形参</code>、或者<code>变量</code>。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">'ok'</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">a</span>)</span>&#123;</span><br><span class="line">    alert(a); <span class="comment">//123</span></span><br><span class="line">    a = <span class="string">'我是a'</span>;</span><br><span class="line">    alert( a ); <span class="comment">//我是a</span></span><br><span class="line">&#125;</span><br><span class="line">fn( <span class="number">123</span> );</span><br><span class="line">alert( a ); <span class="comment">//ok</span></span><br></pre></td></tr></table></figure>

<h3 id="continue-break"><a href="#continue-break" class="headerlink" title="continue / break"></a>continue / break</h3><ul>
<li>continue跳出当前一层循环</li>
<li>break跳出整个循环</li>
</ul>
<h2 id="元素"><a href="#元素" class="headerlink" title="元素"></a>元素</h2><h3 id="对属性的操作"><a href="#对属性的操作" class="headerlink" title="对属性的操作"></a>对属性的操作</h3><ul>
<li>getAttribute(‘属性名’)  获取属性</li>
<li>setAttribute(‘属性名’,’值’)  修改属性</li>
<li>removeAttribute(‘属性名’)  删除属性</li>
<li>hasAttribute(‘属性名’)  判断属性是否存在</li>
<li>xxx.classList</li>
<li>xxx.add()   加类名</li>
<li>xxx.remove()  移除类名</li>
<li>xxx.toggle()  切换类名（有则删，无则加）</li>
<li>xxx.contains()  返回布尔值（有true，无false）</li>
</ul>
<h4 id="getComputedStyle"><a href="#getComputedStyle" class="headerlink" title="getComputedStyle();"></a>getComputedStyle();</h4><ul>
<li>获取元素样式</li>
<li>不兼容IE8及以下浏览器</li>
<li>获取：getComputedStyle().width</li>
</ul>
<h4 id="obj-currentStyle"><a href="#obj-currentStyle" class="headerlink" title="obj.currentStyle;"></a>obj.currentStyle;</h4><ul>
<li>IE8及以下兼容写法</li>
<li>获取：obj.currentStyle.width</li>
</ul>
<h3 id="代码解析"><a href="#代码解析" class="headerlink" title="代码解析"></a>代码解析</h3><h4 id="预解析"><a href="#预解析" class="headerlink" title="预解析"></a>预解析</h4><blockquote>
<p>先去找带 <code>var 等关键词</code> ，<code>变量声明</code>以及<code>函数声明</code>，然后将他们存在一个仓库中，会给每个变量都赋undefined，所以当在变量赋值前查看变量时都等于undefined</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="literal">undefined</span> <span class="comment">// 变量提升</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;&#125; <span class="comment">// 函数提升</span></span><br><span class="line"><span class="comment">// 同名函数会被后面的覆盖</span></span><br></pre></td></tr></table></figure>

<h4 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h4><h4 id="编译"><a href="#编译" class="headerlink" title="编译"></a>编译</h4><p>隐式过程：传参（在编译最后，执行之前执行，也可以理解为优先级更高）</p>
<p>执行顺序</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">5</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">num</span>)</span>&#123;</span><br><span class="line">    alert(num);     <span class="comment">//5</span></span><br><span class="line">    <span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">    alert(num);     <span class="comment">//10</span></span><br><span class="line">&#125;)(num);</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">5</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">num</span>)</span>&#123;</span><br><span class="line">    alert(num);     <span class="comment">//5</span></span><br><span class="line">    <span class="keyword">var</span> num;</span><br><span class="line">    alert(num);     <span class="comment">//5</span></span><br><span class="line">&#125;)(num);</span><br></pre></td></tr></table></figure>

<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><ol>
<li>当函数执行完毕后，就把解析那个所谓的仓库直接丢掉，<code>释放内存</code></li>
<li>而如果<code>fn()函数</code>带有return的话，return的内容会被返回给fn()；return的内容（变量/函数）不会被丢掉，而是保存下来，而没有return的函数fn()中的内容会被丢掉</li>
<li>所以，当定义一个变量 f 去接收带有return的函数 fn() 时，执行变量函数 f() 时，会将return后面的函数内容执行</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"fn函数返回值"</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"return返回值"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> f = fn();</span><br><span class="line">alert(f());</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">弹窗结构：</span></span><br><span class="line"><span class="comment">    fn函数返回值</span></span><br><span class="line"><span class="comment">    return返回值</span></span><br><span class="line"><span class="comment">    undefined</span></span><br><span class="line"><span class="comment">原因：</span></span><br><span class="line"><span class="comment">    var f = fn(); 执行了fn</span></span><br><span class="line"><span class="comment">    alert(f()); 执行f，f相当于function f()&#123;alert("return返回值");&#125;</span></span><br><span class="line"><span class="comment">    alert(f()); f函数没有返回值，默认返回undefined</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>注意：</code> fn()执行完毕之后虽说将<code>解析的那个仓库</code>丢掉了，但是只是将<code>内存中执行的函数内容释放了</code>，函数fn依然存在的,后面依然可以调用；而 return 会使的 fn() 函数的内容/声明的变量保存下来，即return内部函数使用的外部函数变量会被保存下来，不会被js的垃圾回收机制给回收掉</p>
</blockquote>
<h3 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h3><h4 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h4><p>函数a作为参数传入函数b，由函数b执行函数a，那么函数a就叫做回调函数。</p>
<h4 id="setTimeout"><a href="#setTimeout" class="headerlink" title="setTimeout();"></a>setTimeout();</h4><ul>
<li>只执行一次</li>
<li>启动定时器<ul>
<li>参数1：处理函数/回调函数</li>
<li>参数2：时间间隔</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">setTimeout(fn,<span class="number">1000</span>); <span class="number">1</span>秒之后执行fn</span><br></pre></td></tr></table></figure>

<h4 id="setTnterval"><a href="#setTnterval" class="headerlink" title="setTnterval();"></a>setTnterval();</h4><p>循环执行</p>
<h4 id="清除定时器"><a href="#清除定时器" class="headerlink" title="清除定时器"></a>清除定时器</h4><blockquote>
<p>参数为序号</p>
</blockquote>
<ul>
<li>clearTimeout();</li>
<li>clearInterval();</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timer1 = setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log();</span><br><span class="line">&#125;，<span class="number">10000</span>)</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>浏览器的最低频率一般是 13 - 20 之间</code></p>
</blockquote>
<h3 id="获取样式"><a href="#获取样式" class="headerlink" title="获取样式"></a>获取样式</h3><ol>
<li><p>普通的 <code>.style.height</code> ,获取到的是行内样式（如果没有行内样式就获取不到）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> oDiv = <span class="built_in">document</span>.getElementById(<span class="string">'div'</span>);</span><br><span class="line">alert( oDiv.style.height ); <span class="comment">//获取到的是行内样式</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>函数 <code>getComputedStyle()</code> ，获取到的是div最终的样式（不管样式写在哪，获取div的最终呈现的样式）</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert( getComputedStyle(oDiv).height );</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>兼容 IE<br>IE8以下不认识getComputedStyle函数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> h；</span><br><span class="line"><span class="keyword">if</span>( <span class="built_in">window</span>.getComputedStyle )&#123;</span><br><span class="line">    h = getComputedStyle(oDiv).height;</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    h = oDiv.currentStyle.height;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>注:</code></p>
<ul>
<li>不要获取没有定义的样式</li>
<li>不要获取复合样式</li>
</ul>
<h3 id="封装"><a href="#封装" class="headerlink" title="封装"></a>封装</h3><p>例：用函数封装兼容IE8的getComputedStyle函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取某个对象（obj）的某个属性（attr）</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">obj,attr</span></span></span><br><span class="line"><span class="function"><span class="params">attr</span></span></span><br><span class="line"><span class="function"><span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>( <span class="built_in">window</span>.getComputedStyle )&#123;</span><br><span class="line">        <span class="keyword">return</span> getComputedStyle(obj).attr</span><br><span class="line">attr</span><br><span class="line">;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> obj.currentStyle.attr</span><br><span class="line">;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="添加-移除属性"><a href="#添加-移除属性" class="headerlink" title="添加/移除属性"></a>添加/移除属性</h3><ul>
<li>添加属性：setAttribute(‘’,’’);</li>
<li>移除属性：removeAttribute(‘’);</li>
</ul>
<h2 id="数据"><a href="#数据" class="headerlink" title="数据"></a>数据</h2><h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><ul>
<li>number类型 – 数字类型</li>
<li>string类型 <ul>
<li>字符串只是数据，不是类型</li>
<li>所有带引号包裹的都是字符串</li>
<li>字符串的类型为string类型</li>
</ul>
</li>
<li>boolean类型 – 布尔值<code>true/false</code></li>
<li>undefined – 未定义，没有值，系统默认给的值</li>
<li>null – 空，空的指针对象，表示没有对象，这里不该有值</li>
<li>object – 对象</li>
</ul>
<h4 id="引用型数据类型"><a href="#引用型数据类型" class="headerlink" title="引用型数据类型"></a>引用型数据类型</h4><ul>
<li>object 每var一个都会新建一个内存地址去存放这个object</li>
<li>而其他的五种数据类型，属于基本数据类型，是直接比较值，只比较数据值的‘形’是否一样</li>
</ul>
<h4 id="基本数据类型"><a href="#基本数据类型" class="headerlink" title="基本数据类型"></a>基本数据类型</h4><h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><h4 id="字符串定义"><a href="#字符串定义" class="headerlink" title="字符串定义"></a>字符串定义</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'helloWorld'</span>; <span class="comment">// 直接量</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="keyword">new</span> <span class="built_in">String</span>(<span class="string">'helloWorle'</span>); </span><br><span class="line"><span class="keyword">var</span> str = <span class="built_in">String</span>(<span class="string">'helloWorle'</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li>concat 字符串拼接<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str1 = <span class="string">'OK'</span>;</span><br><span class="line"><span class="keyword">var</span> new_str = str.concat( str1 );</span><br><span class="line">alert(new_str); <span class="comment">// helloWorleOK</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="查找字符串"><a href="#查找字符串" class="headerlink" title="查找字符串"></a>查找字符串</h4><ul>
<li>通过指定字符查找位置<ul>
<li>indexOf(‘val’,num)<ul>
<li>查询字符，val查询值，num开始下标</li>
<li>找不到返回-1</li>
</ul>
</li>
<li>lastIndexOf 从后面往前找</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'helloWorld'</span>;</span><br><span class="line">alert( str.indexOf(<span class="string">'h'</span>) ); <span class="comment">// 0 -- 第0个</span></span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">* 指定索引返回字符串</span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>js</span><br><span class="line">alert( str.charAt(<span class="number">1</span>) ); <span class="comment">// e</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>指定索引返回字符串的ASCII码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert( str.charAt(<span class="number">1</span>) ); <span class="comment">// 101 -- e的ASCII码</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>指定字符的ASCII码返回字符</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(<span class="built_in">String</span>.fromCharCode(<span class="number">80</span>)); <span class="comment">// P -- P的ASCII码为80</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>查询下标并返回其ASCII码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(str.charCodeAt(<span class="number">1</span>)); <span class="comment">// 101 -- e的ASCII码</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>指定索引和长度返回字符串</p>
<ul>
<li>substr(‘num’,’sum’)</li>
<li>num开始下标，sum长度</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(str.substr(<span class="number">1</span>,<span class="number">2</span>));<span class="comment">// el</span></span><br></pre></td></tr></table></figure>

<h4 id="截取字符串"><a href="#截取字符串" class="headerlink" title="截取字符串"></a>截取字符串</h4><ul>
<li><p>substring(‘num1’,’num2’)</p>
<ul>
<li>num1开始位置，num2结束位置</li>
<li>不包含num2下标的字符，区间表示为 [num1，num2)</li>
<li>会自动取从小到大的顺序，所以写反也没关系</li>
<li>substring(‘num1’)：相当于 [num1，∞)<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">alert( str.substring(<span class="number">1</span>,<span class="number">9</span>) );</span><br><span class="line">alert( str.substring(<span class="number">9</span>,<span class="number">1</span>) );</span><br><span class="line"><span class="comment">//结果为elloWorl</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>slice</p>
<ul>
<li>正数同上，截取索引可以为负数，（-5，-1）截取倒数第5位~最后一位，不包含最后一位的字符</li>
<li>正数从 1 开始数，倒数第一个是 -1</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert( str.slice(<span class="number">-5</span>,<span class="number">-1</span>) ); <span class="comment">// 结果为Worl</span></span><br></pre></td></tr></table></figure>

<h4 id="转换（不常用）"><a href="#转换（不常用）" class="headerlink" title="转换（不常用）"></a>转换（不常用）</h4><ul>
<li><p>LowerCase 转小写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'helloWORLD'</span>;</span><br><span class="line"><span class="keyword">var</span> new_str = str.LowerCase();</span><br><span class="line">alert( new_str ); <span class="comment">// helloworld</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>toUpperCase转大写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'helloWORLD'</span>;</span><br><span class="line"><span class="keyword">var</span> new_str = str.toUpperCase();</span><br><span class="line">alert( new_str ); <span class="comment">// HELLOWORLD</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="查找"><a href="#查找" class="headerlink" title="查找"></a>查找</h4><ul>
<li>match</li>
</ul>
<p>通过指定字符串查找，可以匹配一个或者多个字符，如果找到会直接返回查找的字符串，没有则返回 <code>null</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'helloworld'</span>;</span><br><span class="line">alert（ str.match(<span class="string">'hell'</span>) )；<span class="comment">// hell</span></span><br></pre></td></tr></table></figure>

<ul>
<li>search</li>
</ul>
<p>匹配字符下标，找到返回下标值，找不到返回 <code>-1</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert( str.search(<span class="string">'m'</span>) ); <span class="comment">//-1</span></span><br></pre></td></tr></table></figure>

<h4 id="替换"><a href="#替换" class="headerlink" title="替换"></a>替换</h4><p>replace( value, newval )</p>
<p>查找第到第一个与 <code>value</code> 匹配的字符或者字符串，将它替换成 <code>newval</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">alert( str.replace(<span class="string">'o'</span>,<span class="number">123</span>) );</span><br><span class="line"><span class="comment">// hell123world</span></span><br><span class="line">alert( str.replace(<span class="string">'ell'</span>,<span class="number">123</span>) );</span><br><span class="line"><span class="comment">// h123oworld</span></span><br></pre></td></tr></table></figure>

<h4 id="分割"><a href="#分割" class="headerlink" title="分割"></a>分割</h4><p>split( val );</p>
<p>以 <code>val</code> （val可以是字符串）将字符串分割，分别放入数组中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log( str.split( <span class="string">'o'</span> ) );</span><br><span class="line"><span class="comment">// 返回为：hell,w,rld</span></span><br><span class="line"><span class="keyword">var</span> s = str.split( <span class="string">'o'</span> );</span><br><span class="line"><span class="comment">// 当我将它付给变量s时，返回s的类型为object</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>注：上面的修改字符串的方法都是不会改变原数组的，只是改变了返回值</p>
</blockquote>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><ul>
<li>数组也是一个特殊的对象类型</li>
</ul>
<h4 id="创建"><a href="#创建" class="headerlink" title="创建"></a>创建</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr1 = [];</span><br><span class="line"><span class="keyword">var</span> arr2 = <span class="built_in">Array</span>();</span><br><span class="line"><span class="keyword">var</span> arr3 = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br></pre></td></tr></table></figure>

<h4 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h4><ul>
<li>indexOf(‘val’)  查询值val,返回下标</li>
<li>pop</li>
<li>shift</li>
<li>unshift</li>
<li>jion</li>
<li>sort  排序</li>
<li>reverse  反向</li>
<li>concat  连接数组</li>
<li>Array.isArray()  判断数组</li>
<li>filter  过滤，去重 <ul>
<li>return self.indexOf(item) === index</li>
</ul>
</li>
<li>map 遍历数组，不改变原数组</li>
<li>forEach 遍历数组，改变原数组</li>
</ul>
<h4 id="类数组"><a href="#类数组" class="headerlink" title="类数组"></a>类数组</h4><p>一个对象有规律数字的属性名（下标），并且有length属性，可以通过普通的for来遍历的对象</p>
<h4 id="冒泡排序"><a href="#冒泡排序" class="headerlink" title="冒泡排序"></a>冒泡排序</h4><ul>
<li>虚拟数组思想</li>
<li>两数交换位置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr[j] = [ arr[j<span class="number">-1</span>] , arr[j<span class="number">-1</span>] = arr[j] ][<span class="number">0</span>]</span><br></pre></td></tr></table></figure>

<h3 id="json"><a href="#json" class="headerlink" title="json"></a>json</h3><ul>
<li>实际上来说是一个字符串类型</li>
<li>{}内的内容所有的内容必须用双引号</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> json = <span class="string">'&#123;"name":"刘谣"，"age":"20"&#125;'</span>;</span><br></pre></td></tr></table></figure>

<ul>
<li>所有的数据传输都是字符串形式</li>
</ul>
<h4 id="方法-1"><a href="#方法-1" class="headerlink" title="方法"></a>方法</h4><ul>
<li>JSON.stringify()  反序列化，将对象转换成json字符串格式</li>
<li>JSON.parse()  序列化，将json字符串转换成object对象，常用</li>
</ul>
<h3 id="转换"><a href="#转换" class="headerlink" title="转换"></a>转换</h3><h4 id="Number"><a href="#Number" class="headerlink" title="Number()"></a>Number()</h4><p>对一个字符串整体进行转换，非法的就转换成NaN</p>
<p>出现NaN的情况：</p>
<ul>
<li>进行了非法的数学运算 (如字符串,undefined,{},json)</li>
</ul>
<blockquote>
<p>六种转换成false：</p>
<ul>
<li>0，”” 空字符串，undefined，null，false，NaN</li>
<li>NaN === NaN，NaN == NaN 都是false，NaN自己都不等于自己(在es6中这个坑被填了)</li>
</ul>
<p>转换成0：””空字符串，null,false,空数组[ ]</p>
<p>转换成NaN：””空字符串,布尔值，空数组</p>
</blockquote>
<h4 id="parseInt"><a href="#parseInt" class="headerlink" title="parseInt()"></a>parseInt()</h4><p>从左到有右检查，遇到非数字就停止，转换出前面的数字，还有取整的功能</p>
<h3 id="Math函数"><a href="#Math函数" class="headerlink" title="Math函数"></a>Math函数</h3><ul>
<li><p>Math.ceil() – 向上取整</p>
</li>
<li><p>Math.floor() – 向下取整</p>
</li>
<li><p>Math.round() – 四舍五入</p>
</li>
<li><p>Math.random() – 随机数</p>
</li>
<li><p>Math.max() – 返回较大的一个值</p>
</li>
<li><p>Math.min() – 返回较小的一个值</p>
</li>
<li><p>Math.sin() – 三角函数中：接收的是弧度制</p>
</li>
</ul>
<h3 id="判断数据类型"><a href="#判断数据类型" class="headerlink" title="判断数据类型"></a>判断数据类型</h3><h4 id="三目运算"><a href="#三目运算" class="headerlink" title="三目运算"></a>三目运算</h4><ul>
<li>适合 <code>if/else</code> 类型</li>
<li>表达式是否成立 ? 成立输出1 ： 不成立输出2 ;</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span> ;</span><br><span class="line">a == <span class="number">0</span> ? a = <span class="number">1</span> : a = <span class="number">-1</span> ;</span><br><span class="line">等价于 a = a == <span class="number">0</span> ? <span class="number">1</span> : <span class="number">-1</span> ;</span><br></pre></td></tr></table></figure>

<h4 id="switch语句"><a href="#switch语句" class="headerlink" title="switch语句"></a>switch语句</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>()&#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">        输出<span class="number">1</span>；</span><br><span class="line">        <span class="keyword">break</span>；</span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>：</span><br><span class="line">        输出<span class="number">2</span>；</span><br><span class="line">        <span class="keyword">break</span>；</span><br><span class="line">    <span class="keyword">default</span>：</span><br><span class="line">        输出其他；</span><br><span class="line">        <span class="keyword">break</span>；</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="自增自减"><a href="#自增自减" class="headerlink" title="自增自减"></a>自增自减</h4><ul>
<li>后自增：先赋值后自增（自减同理）</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">20</span>;</span><br><span class="line"><span class="keyword">var</span> a = i++;</span><br><span class="line">a = <span class="number">20</span>;</span><br><span class="line">i = <span class="number">21</span>;</span><br></pre></td></tr></table></figure>

<ul>
<li>前自增：先自增后赋值（自减同理）</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">20</span>;</span><br><span class="line"><span class="keyword">var</span> a = ++i;</span><br><span class="line">a = <span class="number">21</span>;</span><br><span class="line">i = <span class="number">21</span>;</span><br></pre></td></tr></table></figure>

<h4 id="循环"><a href="#循环" class="headerlink" title="循环"></a>循环</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在网页中输出内容</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">''</span>);</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>注</code></p>
<p>写在window.onload里面的代码会覆盖掉body里面的所有内容</p>
</blockquote>
<h3 id="数组-1"><a href="#数组-1" class="headerlink" title="数组"></a>数组</h3><h4 id="创建数组"><a href="#创建数组" class="headerlink" title="创建数组"></a>创建数组</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]; <span class="comment">// 内容有几个长度为几</span></span><br><span class="line"><span class="comment">// 后面两种当数组中只有一个值时，长度为那个值</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="built_in">Array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>);</span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>);</span><br><span class="line"><span class="comment">// 不过es6填了这个坑，一个时就一个元素，长度为1</span></span><br></pre></td></tr></table></figure>

<h4 id="修改数组"><a href="#修改数组" class="headerlink" title="修改数组"></a>修改数组</h4><ol>
<li><p>修改长度：超出长度的内容就没有了</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">5</span>,<span class="number">3</span>,<span class="number">6</span>];</span><br><span class="line">arr.length = <span class="number">3</span>;</span><br><span class="line">alert( arr );   <span class="comment">//结果为 1,5,3</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>修改内容：将数组中的某个内容替换掉</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">5</span>,<span class="number">3</span>,<span class="number">6</span>];</span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">'hello'</span>;</span><br><span class="line">alert( arr );   <span class="comment">//结果为 hello,5,3，6</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>增加内容：再数组中的最后增加内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">5</span>,<span class="number">3</span>,<span class="number">6</span>];</span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">'OK'</span>;</span><br><span class="line">alert( arr );   <span class="comment">//结果为 1,5,3,6,OK</span></span><br></pre></td></tr></table></figure>

</li>
</ol>
<h4 id="稀疏数组"><a href="#稀疏数组" class="headerlink" title="稀疏数组"></a>稀疏数组</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,,<span class="number">3</span>,,<span class="number">5</span>];</span><br><span class="line">alert( arr.length );    <span class="comment">//5</span></span><br></pre></td></tr></table></figure>

<h4 id="方法-2"><a href="#方法-2" class="headerlink" title="方法"></a>方法</h4><blockquote>
<p><code>注：</code> 这些方法都会改变原数组</p>
</blockquote>
<ol>
<li>添加元素 (<code>返回新长度</code>)</li>
</ol>
<ul>
<li><p>在数组开头</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">arr.unshift(<span class="string">'hello'</span>);   <span class="comment">// hello,1,2,3,4,5</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在数组末尾</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">arr.push(<span class="string">'hello'</span>);   <span class="comment">// 1,2,3,4,5,hello</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<ol start="2">
<li>删除元素 (<code>返回删除的元素</code>)</li>
</ol>
<ul>
<li><p>删除首个元素并返回</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.shift();</span><br><span class="line">alert( arr );   <span class="comment">//结果为 2,3,4,5</span></span><br><span class="line">alert( arr.shift() );   <span class="comment">//结果为 1</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>删除末尾元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.pop();</span><br><span class="line">alert( arr );   <span class="comment">//结果为 1,2,3,4</span></span><br><span class="line">alert( arr.pop() );   <span class="comment">//结果为 5</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<ol start="3">
<li>splice</li>
</ol>
<p>添加，删除，替换一体</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">第一位数：在第几个位置</span></span><br><span class="line"><span class="comment">第二个数：0 为不删除，1/2/3代表删几个</span></span><br><span class="line"><span class="comment">第三个数：添加或者替换的元素</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="comment">//在第二个位置上添加hello</span></span><br><span class="line">arr.splice(<span class="number">1</span>,<span class="number">0</span>,<span class="string">'hello'</span>); <span class="comment">//返回结果 1,hello,2,3,4,5</span></span><br><span class="line"><span class="comment">//删除第二个后面两个元素</span></span><br><span class="line">arr.splice(<span class="number">1</span>,<span class="number">2</span>); <span class="comment">//返回结果 1,4,5</span></span><br><span class="line"><span class="comment">//将第二个元素换成hello</span></span><br><span class="line">arr.splice(<span class="number">1</span>,<span class="number">1</span>,<span class="string">'hello'</span>); <span class="comment">//返回结果 1,hello,3,4,5</span></span><br><span class="line"><span class="comment">//可以添加多个值，替换同理</span></span><br><span class="line">arr.splice(<span class="number">1</span>,<span class="number">1</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>,<span class="string">'d'</span>);</span><br></pre></td></tr></table></figure>

<h4 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h4><ul>
<li><p>sort()  默认排序，只笔每个元素的首位，没卵用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">arr.sort( <span class="function"><span class="keyword">function</span> (<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a-b;</span><br><span class="line">    <span class="keyword">return</span> b-a;</span><br><span class="line">&#125; )</span><br></pre></td></tr></table></figure>
</li>
<li><p>冒泡法  <code>数组元素在10个以内</code> <code>性能差</code></p>
<ul>
<li>‘&gt;’ 调换位置（返回值为正时）</li>
<li>‘0’ 不调换位置（相等）</li>
<li>‘&lt;’ 不调换位置（返回值为负）</li>
</ul>
</li>
<li><p>二分法 <code>当数组元素在10个以上时</code></p>
</li>
</ul>
<h4 id="别的操作"><a href="#别的操作" class="headerlink" title="别的操作"></a>别的操作</h4><ul>
<li>reverse()  将数组颠倒</li>
<li>concat()  数组和数组拼接，不会改变原数组</li>
<li>slice(1,3) 截取，从第二位到第三位，不包括第四位</li>
<li>join  拼接成字符串，用某元素把数组拼接成字符串</li>
<li>Array.isArray( arr )  判断数组，返回值为 true/false</li>
</ul>
<h3 id="ECMAscript5"><a href="#ECMAscript5" class="headerlink" title="ECMAscript5"></a>ECMAscript5</h3><blockquote>
<p>是javascript的执行标准</p>
</blockquote>
<h4 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h4><ul>
<li>value ：是数组的项</li>
<li>index ：当前项的下标</li>
<li>arr ：是数组本身</li>
</ul>
<ol>
<li><p>forEach遍历数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">forEach( <span class="function"><span class="keyword">function</span> (<span class="params">value,index,arr</span>)</span>&#123;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>map 计算</p>
</li>
</ol>
<p>有返回值，返回值是一个数组，return是什么就是什么</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">map( <span class="function"><span class="keyword">function</span> (<span class="params">val</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> val * <span class="number">2</span>;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>filtre 过滤</li>
</ol>
<p>有返回值，返回值是一个数组，retuern为真（true）的value值会进入数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">filter(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value &gt; <span class="number">5</span>;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>every 有点判断的意思</li>
</ol>
<p>每一个为true，才返回true，否则为false</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">every(<span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> val != <span class="string">'h'</span>; <span class="comment">//是否每个值都等于h</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>some 也有判断的意思</li>
</ol>
<p>每一个为true，才返回true，否则为false</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">some(<span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> val == <span class="string">'h'</span>; <span class="comment">//是否有一个值都等于h</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>随机数：</code> Math.random() 随机一个0~1之间的数，不包括1</p>
</blockquote>
<h2 id="节点"><a href="#节点" class="headerlink" title="节点"></a>节点</h2><ul>
<li>元素节点</li>
<li>文本节点</li>
<li>属性节点</li>
<li>注释节点</li>
</ul>
<h3 id="获取节点"><a href="#获取节点" class="headerlink" title="获取节点"></a>获取节点</h3><p>obj.childNodes 获取所有的子节点</p>
<p>【子节点：IE8及以下都会忽略空格和换行】</p>
<h4 id="obj-children-获取所有的子元素节点"><a href="#obj-children-获取所有的子元素节点" class="headerlink" title="obj.children 获取所有的子元素节点"></a>obj.children 获取所有的子<code>元素</code>节点</h4><p>obj.nodeType 获取节点的类型，返回其编号<br>元素节点：1<br>属性节点：2<br>文本节点：3<br>注释节点：8</p>
<p>4、obj.tagName 获得<code>元素节点</code>的名称</p>
<p>5、obj.nodeName 获取所有节点的<code>节点名称</code></p>
<p>6、obj.getAttributeNode() 获取指定节点的指定属性节点名称，【不常用】</p>
<p><code>以下方法不常用</code></p>
<p>7、obj.firstChild 获取第一个子节点</p>
<p>8、obj.lastChild 获取最后一个子节点</p>
<p>9、obj.firstElementChild 获取第一个子元素节点，【不兼容IE8，一般不用】</p>
<p>10、obj.lastElementChild 获取最后一个子元素节点，【同上】</p>
<p>1obj.nextSibling 下一个兄弟节点【同上】</p>
<p>1obj.nextElementSibling 下一个兄弟元素节点【同上】</p>
<p>1obj.previousSibling 上一个兄弟节点【同上】</p>
<p>14、obj.previousElementSibling 上一个兄弟元素节点【同上】</p>
<h4 id="15、obj-parentNode-获取父节点，没有兼容性问题"><a href="#15、obj-parentNode-获取父节点，没有兼容性问题" class="headerlink" title="15、obj.parentNode 获取父节点，没有兼容性问题"></a>15、obj.parentNode 获取父节点，没有兼容性问题</h4><p>16、obj.offsetParent 返回定位了的父级元素，它相对于谁定位的，谁就是他的定位父级</p>
<p>17、obj.childElementCount 获取子元素节点的个数【不兼容IE8及以下】</p>
<h4 id="常用方法"><a href="#常用方法" class="headerlink" title="常用方法:"></a>常用方法:</h4><p>children , offsetParent , parentNode ， tagName</p>
<h4 id="创建一个元素节点"><a href="#创建一个元素节点" class="headerlink" title="创建一个元素节点"></a>创建一个元素节点</h4><p>document.createElement(obj)<br>以前之前用“ innerHTML += ” ，添加标签时，实际上只是一个字符串，在使用时还需要获取元素<br>obj.appendChild(div);</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"wrap"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> oWrap = ducoment.getElementById(<span class="string">"wrap"</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">//相比“ += ”的方法，这种方法对于添加事件，添加id更方便</span></span></span><br><span class="line"><span class="javascript">    div.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">"这是一个div元素节点"</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="javascript">    div.id = <span class="string">"box"</span>;</span></span><br><span class="line"><span class="javascript">    <span class="comment">//在oWrap最后面添加一个节点，只能是节点，不能加 "" ，不然就变成字符串</span></span></span><br><span class="line">    oWrap.appendChild(div);</span><br><span class="line"><span class="javascript">    <span class="comment">//innerHTML 在只是写一个文本时，用这个更合适</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="克隆节点"><a href="#克隆节点" class="headerlink" title="克隆节点"></a>克隆节点</h4><p>节点.cloneNode(bool);<br>参数默认为false；<br>true 深度克隆，复制所有<br>false 浅度克隆，不复制内容</p>
<p>添加子节点<br>obj.insertBefore(要添加的子节点，需要放在哪个子节点的前面)</p>
<p>删除子节点<br>obj.removeChild(节点) 通过父节点删除子节点</p>
<p>替换子节点<br>obj.replaceChild(子节点，被替换的节点)</p>
<h2 id="css试图模式"><a href="#css试图模式" class="headerlink" title="css试图模式"></a>css试图模式</h2><h3 id="client"><a href="#client" class="headerlink" title="client"></a>client</h3><p>获取文档可视区域的宽高（不包括滚动条）<br>clientWidth<br>clientHeight</p>
<p>获取边框厚度<br>clientTop 元素上边框厚度<br>4、clientLeft 元素左边框厚度</p>
<h3 id="inner"><a href="#inner" class="headerlink" title="inner"></a>inner</h3><p>获取窗口的可视区域宽高（包括滚动条）<br>【IE8以下不兼容】<br>innerWidth<br>innerHeight</p>
<h3 id="offset-与定位有关"><a href="#offset-与定位有关" class="headerlink" title="offset 与定位有关"></a>offset 与定位有关</h3><p>获取元素的实际大小，即content+padding+border，即写的是宽高是多少就是多少<br>offsetWidth<br>offsetHeight</p>
<p>获取从元素的<code>外边框开始</code>到定位父级的<code>内边框</code>距离（不包括定位父级的边框）<br>offsetTop 元素顶部到定位父级的顶部的距离<br>4、offsetLeft 元素左部到定位父级的左部的距离</p>
<h3 id="scroll"><a href="#scroll" class="headerlink" title="scroll"></a>scroll</h3><p>获取元素Content+padding的大小，当元素内容的东西超出的时候，会把超出的部分算进去；当超出时，下padding可能就没有了，这时算的就是上padding到内容底部的距离。<br>【当元素有overflow：hidden时，得到的是上下padding+content+超出的部分】<br>scrollWidth<br>scrollHeight</p>
<p>获取X，Y轴方向被挡住的那部分大小<br>scrollTop<br>4、scrollLeft</p>
<h3 id="page"><a href="#page" class="headerlink" title="page"></a>page</h3><p>pageY 到document的y轴方向的距离，包括没有显示的部分</p>
<h2 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h2><p>DOM零级事件，绑定on+”….”事件<br>即obj.onclick，这种事件没有兼容性问题<br>只同一个对象绑定的相同事件只能有一个<br>事件对象e</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//兼容IE</span></span><br><span class="line">    e = e || <span class="built_in">window</span>.event;<span class="comment">//事件对象</span></span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>监听事件<br>DOM二级事件<br>obj.addEventListener(“事件类型”，事件函数(回调函数)，布尔值);<br>兼容IE：obj.attachEvent(“事件类型”，事件函数)；<br>IE不支持捕获<br>布尔值：<br>    默认false：冒泡；<br>    true：捕获；（与冒泡相反，从最上面的事件向下调用）</p>
<p>事件捕获：父级事件向下执行到子级事件；<br>捕获比冒泡优先，并且比冒泡执行快一点</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">obj.addEventListener(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    e.stopPropagation();<span class="comment">//也能阻止冒泡事件</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>事件冒泡<br>子集将一直向上调用父级事件，直到document</p>
<p>阻止事件冒泡<br>e.stopPropagation();<br>兼容IE：e.cancelBubble = true;<br>true阻止，false不阻止</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">obj.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    e = e || <span class="built_in">window</span>.event;</span><br><span class="line">    e.cancelBubble = <span class="literal">true</span>;<span class="comment">//IE写法</span></span><br><span class="line">    e.stopPropagation();<span class="comment">//阻止冒泡事件，即所有的父级事件都不执行</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>4、解绑监听事件<br>obj.removeEventListener(“事件类型”，函数名);<br>兼容IE<br>obj.detachEvent(“事件类型”，函数名);</p>
<h3 id="事件代理"><a href="#事件代理" class="headerlink" title="事件代理"></a>事件代理</h3><p>触发事件源的元素<br>e.target<br>e.srcElement</p>
<h3 id="DOM零级事件"><a href="#DOM零级事件" class="headerlink" title="DOM零级事件"></a>DOM零级事件</h3><p>obj.onclick = function (){}<br>DOM二级事件<br>obj.addEventListener(“click”,function(){});</p>
<p>DOM零级事件即使不点击时，也开辟了内存把function存起来了，并将obj的onclick的属性指向这个function；<br>而DOM二级事件则是，当触发这个事件时才会开辟内存读取这个function，没有触发时不会读取function</p>
<h3 id="阻止默认行为"><a href="#阻止默认行为" class="headerlink" title="阻止默认行为"></a>阻止默认行为</h3><h4 id="oncontextmenu"><a href="#oncontextmenu" class="headerlink" title="oncontextmenu"></a>oncontextmenu</h4><p>检测鼠标右键单击<br>阻止默认行为：e.preventDefault();<br>IE8及以下：e.returnValue = false;<br>true 不阻止， false 阻止；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//return false也能阻止默认行为，但是只能在DOM零级事件中使用</span></span><br><span class="line"><span class="built_in">document</span>.oncontextmenu = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//而在DOM二级事件中就无法使用了</span></span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"contextmenu"</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//零级二级都可以</span></span><br><span class="line"><span class="built_in">document</span>.oncontextmenu = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//阻止默认行为</span></span><br><span class="line">    <span class="comment">//鼠标右键时不弹窗</span></span><br><span class="line">    e.preventDefault();</span><br><span class="line">    <span class="comment">//IE</span></span><br><span class="line">    e.returnValue = <span class="literal">false</span>;</span><br><span class="line">    <span class="comment">//兼容写法</span></span><br><span class="line">    e.preventDefault ? e.preventDefault() : e.returnValue = <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="onmousedown"><a href="#onmousedown" class="headerlink" title="onmousedown"></a>onmousedown</h4><p>左键右键都能够监听<br>（不能在这里面阻止默认行为）</p>
<h3 id="鼠标滚动事件"><a href="#鼠标滚动事件" class="headerlink" title="鼠标滚动事件"></a>鼠标滚动事件</h3><h4 id="document-onscroll"><a href="#document-onscroll" class="headerlink" title="document.onscroll"></a>document.onscroll</h4><p>监听浏览器的滚动条变化，只要滚动条的滑块发生了变化就会被触发；</p>
<h4 id="document-onmousewheel"><a href="#document-onmousewheel" class="headerlink" title="document.onmousewheel"></a>document.onmousewheel</h4><p>只监听鼠标滚轮的滚动事件，而直接拖动滚动条的滑块是不会被触发的；<br>【火狐浏览器没有onmousewheel属性]<br>火狐浏览器写法：document.DOMmouseScroll<br>【但是在火狐里面不能以DOM零级的方式绑定滚轮事件，所以要DOM二级事件写法】</p>
<p>判断滚轮方向：<br>e.wheelDelta<br>向下滚动 ： -120，<br>向上滚动 ： +120；</p>
<p>火狐 ：<br>e.detail<br>向下滚动 ： +3，<br>向上滚动 ： -3；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.onmousewheel = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//滚轮方向</span></span><br><span class="line">    <span class="built_in">console</span>.log(e.wheelDelta);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//兼容火狐浏览器：DOMmouseScroll,但是在火狐里面不能以DOM零级的方式绑定滚轮事件</span></span><br><span class="line">documnet.DOMmouseScroll = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">&#125;<span class="comment">//不会触发</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"DOMMoueScroll"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    e = e || <span class="built_in">window</span>.event;</span><br><span class="line">    <span class="built_in">console</span>.log(e.detail);</span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br></pre></td></tr></table></figure>

<h3 id="鼠标滚轮事件兼容"><a href="#鼠标滚轮事件兼容" class="headerlink" title="鼠标滚轮事件兼容"></a>鼠标滚轮事件兼容</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用户写的函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">wheel</span>(<span class="params">e,d</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log( d );<span class="comment">//鼠标滚动方向的判断数值</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"事件处理函数"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用自定义滚轮函数</span></span><br><span class="line">mouseWheel(<span class="built_in">document</span>,wheel);</span><br><span class="line"><span class="comment">//鼠标滚轮兼容函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mouseWheel</span>(<span class="params">dom,efn</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> type;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//真正的事件处理函数，用来处理很多统一的值</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">        e = e || <span class="built_in">window</span>.event;</span><br><span class="line">        <span class="comment">//统一滚动方向数值，+1向上，-1向下</span></span><br><span class="line">        <span class="keyword">var</span> direction = e.wheelDelta/<span class="number">120</span> || -e.detail/<span class="number">3</span>;</span><br><span class="line">        <span class="comment">//每次调用fn之后改变this指向，并且把鼠标滚动方向，数值都传出去给用户的wheel函数</span></span><br><span class="line">        <span class="comment">//判断用户函数的返回值是否为false，即用户是否要阻止浏览器的默认行为</span></span><br><span class="line">        <span class="keyword">if</span> ( efn.call(dom, e, direction) === <span class="literal">false</span> )&#123;</span><br><span class="line">            <span class="comment">//判断是否为IE8及以下</span></span><br><span class="line">            <span class="keyword">if</span> ( dom.addEventListener )&#123;</span><br><span class="line">                e.preventDefault();<span class="comment">//阻止默认行为</span></span><br><span class="line">            &#125; <span class="keyword">else</span>&#123;</span><br><span class="line">                e.returnValue = <span class="literal">false</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//判断浏览器，火狐与其他浏览器</span></span><br><span class="line">    <span class="keyword">if</span> ( dom.onmousewheel === <span class="literal">null</span> )&#123;</span><br><span class="line">        <span class="comment">//其他浏览器</span></span><br><span class="line">        type = <span class="string">"mousewheel"</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">//火狐浏览器</span></span><br><span class="line">        type = <span class="string">"DOMMouseScroll"</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//判断IE浏览器，决定绑定方式</span></span><br><span class="line">    <span class="keyword">if</span> ( dom.addEventListener )&#123;</span><br><span class="line">        dom.addEventListener( type, fn );</span><br><span class="line">    &#125; <span class="keyword">else</span>&#123;</span><br><span class="line">        dom.attachEvent( <span class="string">"on"</span>+type, fn );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>注：所有on....事件的默认值都为null</code></p>
<h2 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h2><h2 id="表单事件"><a href="#表单事件" class="headerlink" title="表单事件"></a>表单事件</h2><p>onblur 失去焦点<br>onfocus 获得焦点</p>
<p>obj.focus(); 给元素自动聚焦，必须是能获取到光标的元素</p>
<p>obj.onchange<br>当能获得焦点的元素内容被改变并且元素失去焦点之后会被触发，优先级比onblur高一点</p>
<p>obj.oninput<br>当内容改变时马上触发</p>
<h2 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h2><p>obj.onkeydown<br>当按下键盘时立即触发</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">obj.onkeydown = funcion(e)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(e.key);<span class="comment">//直接返回按键名称</span></span><br><span class="line">    <span class="built_in">console</span>.log(e.code);<span class="comment">//返回带标识的 按键名称</span></span><br><span class="line">    <span class="built_in">console</span>.log(e.keyCode);<span class="comment">//按键的编码</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>obj.onkeypress<br>按下键盘触发【只会相应数字键，字母键等能输出文字的键，不响应功能键】</p>
<p>obj.onkeyup<br>按键抬起时触发</p>
<p>判断alt和ctrl有没有触发<br>e.altKey<br>e.ctrlKey</p>
<h2 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h2><p>【正则匹配的是连续性的字符】</p>
<p>match方法<br>根据字符串查找相同的字符串，符合条件的字符串放到数组中并返回</p>
<ul>
<li>正则表达式可以直接写中文</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="regexp">/学习/</span>; <span class="comment">//字面量方式  str既是一个正则规则</span></span><br><span class="line"><span class="comment">//构造函数形式</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">"学习"</span>); <span class="comment">//正则</span></span><br></pre></td></tr></table></figure>

<h3 id="text-str-正则的方法"><a href="#text-str-正则的方法" class="headerlink" title="text(str) 正则的方法"></a>text(str) 正则的方法</h3><p>检测str中有没有符合正则规则匹配的字符串<br>有符合条件的：返回true<br>没有：返回false</p>
<h3 id="元字符"><a href="#元字符" class="headerlink" title="元字符"></a>元字符</h3><p>【在正则有特殊意义】</p>
<p>\d ：匹配数字<br>\D ：匹配非数字</p>
<p>\s ：匹配空格<br>\S ：非k空格</p>
<p>\w ：数字、字母、下划线<br>\W ：非字符，除了\w之外的所有字符</p>
<p>\b ：独立部分/单词边界</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var reg = /\bhappy\b/; //只会匹配为happy的完整的独立的单词</span><br></pre></td></tr></table></figure>

<p>\B ：非单词边界</p>
<p>. ：匹配任意的字符，不包括\n \r</p>
<p>\r ：制表符，【基本用不到】</p>
<p>\ ：反斜杠，转移，会把紧跟着的字符转义为别的意义</p>
<h4 id="量词"><a href="#量词" class="headerlink" title="量词"></a>量词</h4><p>规则后面写，给某一个相同的规则设定连续出现多少次</p>
<blockquote>
<p>量词的匹配模式：<br>贪婪匹配：默认从最高次数匹配，知道底线次数；如果不满足底线次数，则跳过。<br>var reg = /\d{2,5}/;【从5次开始匹配】</p>
</blockquote>
<blockquote>
<p>懒惰匹配：从低次开始匹配，在贪婪模式后加“ ？”；<br>var reg = /\d{2,5}?/;【从2次开始匹配】</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/\d&#123;5&#125;/</span>; <span class="comment">//匹配5个连续数字</span></span><br><span class="line"><span class="keyword">var</span> reg= <span class="regexp">/\d&#123;1,9&#125;/</span>; <span class="comment">//最少1个，最多9个</span></span><br><span class="line"><span class="keyword">var</span> reg= <span class="regexp">/\d&#123;1,&#125;/</span>; <span class="comment">//最少1个，上不封顶</span></span><br></pre></td></tr></table></figure>

<ul>
<li>–&gt; {0,} 0到正无穷，所有，不限个数</li>
</ul>
<ul>
<li>–&gt; {1,} 1到正无穷，最少要有一个<br>? –&gt; {0,1} 要么没有，要么一个</li>
</ul>
<h4 id="修饰符-标识符"><a href="#修饰符-标识符" class="headerlink" title="修饰符/标识符"></a>修饰符/标识符</h4><p>g ：golbal 全局匹配</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;123abc456def&quot;;</span><br><span class="line">var reg = /\d/g;</span><br></pre></td></tr></table></figure>

<p>i ：忽略大小写</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;123abc456def&quot;;</span><br><span class="line">var reg = /ABC/ig;</span><br></pre></td></tr></table></figure>

<p>m ：换行匹配</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;\n123abc456def\n&quot;;</span><br><span class="line">var reg = /ABC/igm;</span><br></pre></td></tr></table></figure>

<p>() ：组/子项，只会匹配一个整体<br>    \1 代表第一个子集匹配的内容<br>    \2 代表第二个子集匹配的内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;abccccabc&quot;;</span><br><span class="line">var reg = /adc+/g; // [abcccc,abc]</span><br><span class="line">var reg2 = /(abc)+/g; //[abc,abc]</span><br></pre></td></tr></table></figure>

<p>[] ：字符集<br>    字段：返回两个字符Unicode码之间的所有码对应的字符<br>    [0-9][a-z][A,Z]  可以一起写[0-9a-zA,Z]<br>    [()//?+*{}-] 这些在字符串中都是无意义的，普通符号<br>    [059] 匹配0或者5或者9</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;14376423987&quot;;</span><br><span class="line">var reg = /[1-5]/g; //[1,4,3,4,2,3]</span><br></pre></td></tr></table></figure>

<p>中文编码 ：\u4e00-\u9fa5</p>
<p>| ：或者，“|”前面的一个整体和后面的一个整体</p>
<p>^ ：以什么开始的字符<br>【在字符集中表示除了^跟着的字符以外的东西】</p>
<p>$ ：以什么结束的字符</p>
<h2 id="存储-缓存数据"><a href="#存储-缓存数据" class="headerlink" title="存储/缓存数据"></a>存储/缓存数据</h2><h3 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h3><p>上限4kb，数据默认有时间限制，默认是一次会话的时间（打开一个窗口，关闭后就结束）<br>过期时间可以设置：每次与后台交互请求的时候，都会自动发送cookie过去，如果遇上和cookie里的数据没有很大关系的请求时，发送cookie就是占用资源</p>
<blockquote>
<p>大部分的cookie必须在服务器下存储，cookie是在document下的<br>传输的必须是字符串，键值对</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.cookie = <span class="string">"name=刘谣"</span>;</span><br><span class="line"><span class="built_in">document</span>.cookie = <span class="string">"age=20"</span>;</span><br><span class="line"><span class="comment">//设置到期时间,一天</span></span><br><span class="line"><span class="built_in">document</span>.cookie = <span class="string">"name=刘谣;expire"</span> + <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="keyword">new</span> Data().getTime()+<span class="number">24</span>*<span class="number">60</span>*<span class="number">60</span>*<span class="number">1000</span>).toUTCString();</span><br></pre></td></tr></table></figure>

<h3 id="localStorage和sessionStorage"><a href="#localStorage和sessionStorage" class="headerlink" title="localStorage和sessionStorage"></a>localStorage和sessionStorage</h3><p>同：<br>存储的数据没有上限<br>在window下</p>
<p>异：<br>localStorage：永久保存，除非认为清楚或者清楚浏览器缓存</p>
<blockquote>
<p>不需要服务器也可以</p>
</blockquote>
<p>sessionStorage：一次会话的时间，并且不能设置过期时间</p>
<p>【以上三种都遵守同源策略】</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">localStorage.setItem(<span class="string">"name"</span>,<span class="string">"刘谣"</span>);</span><br><span class="line">localStorage.setItem(<span class="string">"age"</span>,<span class="string">"20"</span>);</span><br></pre></td></tr></table></figure>

<p>用json存储数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">localStorage.setItem(<span class="string">"json"</span>,<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">    name : <span class="string">"刘谣"</span>,</span><br><span class="line">    age : <span class="string">"20"</span></span><br><span class="line">&#125;));</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取数据，获取到的就是JSON的字符串内容</span></span><br><span class="line">localStorage.getItem(<span class="string">"json"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//利用json的反序列化转成对象</span></span><br><span class="line"><span class="built_in">console</span>.log( <span class="built_in">JSON</span>.parse(localStorage.getItem(<span class="string">"json"</span>)) );</span><br><span class="line"></span><br><span class="line"><span class="comment">//删除某一个数据</span></span><br><span class="line">localStorage.removeItem(<span class="string">"json"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//删除所有数据</span></span><br><span class="line">localStorage.clear(<span class="string">"json"</span>);</span><br></pre></td></tr></table></figure>

<h2 id="字符串模板"><a href="#字符串模板" class="headerlink" title="字符串模板"></a>字符串模板</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    name : <span class="string">"刘谣"</span>,</span><br><span class="line">    age : <span class="string">"20"</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//反引号,所有内容都在 `` 里面写</span></span><br><span class="line"><span class="comment">//所有的换行都会保留</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">`我是<span class="subst">$&#123;obj.name&#125;</span>，几年<span class="subst">$&#123;obj.age&#125;</span>岁`</span>;</span><br></pre></td></tr></table></figure>

<h2 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h2><p>asyncChronous javascript and XML<br>【同源策略，不可跨域】</p>
<blockquote>
<p>在不刷新页面的前提下，更新当前这个页面或者局部的数据；<br>实现与后台的数据交互，同时在页面进行更新</p>
</blockquote>
<p>ajax是一个<code>对象</code>，必须被new执行的对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建一个ajax对象</span></span><br><span class="line"><span class="keyword">var</span> ajax = <span class="keyword">new</span> XMLHttpRequest();</span><br></pre></td></tr></table></figure>

<p>open( get/post , 接口地址 , 是否异步/同步true(异步)/false(同步) );</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ajax.open(<span class="string">"get"</span>,<span class="string">"www.baidu.com/xxx"</span>,<span class="literal">true</span>);</span><br></pre></td></tr></table></figure>

<p>send(); 发送到后台</p>
<p>监听状态，当与后台交互的状态发生变化的时候，就会触发一个函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">ajax.pnreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//当前的状态码ajax.readyState</span></span><br><span class="line">    <span class="comment">//当数据全部接收完成时</span></span><br><span class="line">    <span class="keyword">if</span>(ajax.readyState ==== <span class="number">4</span>)&#123;</span><br><span class="line">        <span class="comment">//判断服务器的好坏，服务器状态码，http状态码</span></span><br><span class="line">        <span class="keyword">if</span>(ajax.status &gt;= <span class="number">200</span> &amp;&amp; ajax.status &lt; <span class="number">300</span> || ajax.status === <span class="number">300</span>)&#123;</span><br><span class="line">            <span class="comment">//获取的数据反映出来</span></span><br><span class="line">            <span class="built_in">console</span>.log(ajax.responseText);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>与后台交互时当前的状态码ajax.readyState<br>    0 ：ajax已经创建，但是没有调用open方法<br>    1 ：open已经调用，没有send发法发送<br>    2 ：已经发送给后台，但是还没有得到数据<br>    3 ：正在接受数据<br>    4 ：数据全部接收完成<br>    【但是也存在有状态码为4的时候数据没有接收完成，这时可能是服务器出问题了】</p>
<p>服务器状态码/http状态码ajax.status<br>    大于200并且小于300，或者等于300表示服务器没有问题</p>
<p>当用户的网络很差或者其他情况，后台处理时间很长；后台应该达到一定时间自动关闭这个请求，让用户不需要继续等待了，无法访问</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//一秒后关闭请求</span></span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    ajax.abort(); <span class="comment">//关闭请求</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>

<h3 id="get和post的区别"><a href="#get和post的区别" class="headerlink" title="get和post的区别"></a>get和post的区别</h3><p>同：都是使用键值对格式，传输数据都是没有上限的<br>异：但是get一般只用来传输小数据，因为get的数据（传输）会直接显示在地址栏处，浏览器会对url地址栏的字符长度做限制</p>
<h4 id="get"><a href="#get" class="headerlink" title="get"></a>get</h4><p>所有发送的数据都跟在 “？” 后面，在地址栏显示，保密性极差<br>数据：http:<a href="http://www.baidu.com/xxx?xxxxxx" target="_blank" rel="noopener">www.baidu.com/xxx?xxxxxx</a><br>ajax.open(“get”,”http:<a href="http://www.baidu.com/xxx?xxxxxx&quot;,true" target="_blank" rel="noopener">www.baidu.com/xxx?xxxxxx&quot;,true</a>);</p>
<h4 id="post"><a href="#post" class="headerlink" title="post"></a>post</h4><p>可以在network中看到数据<br>数据前不带 “？” 问号，以字符串形式放在send里面，保密性和get差不多的，只是不像get一样直接在地址栏显示出来<br>数据：xxxxxx<br>ajax.open(“get”,”http:<a href="http://www.baidu.com/xxx&quot;,true" target="_blank" rel="noopener">www.baidu.com/xxx&quot;,true</a>);<br>ajax.send(“xxxxxx”);<br>post必须设置请求头<br>ajax.setRequestHeader(“Content-Type”,”xxxxx”)</p>
<h2 id="jsonp"><a href="#jsonp" class="headerlink" title="jsonp"></a>jsonp</h2><p>是一种非正式的传输<code>协议</code><br>jsonp是利用了script的src属性的跨域漏洞，可以去其他不同的服务器拿数据</p>
<blockquote>
<p>比如：img的src，能够跨域访问别的网页的图片，其他的底层定义的src的属性的一些标签也可以实现跨域访问，但是只能显示它本身标签的内容形式</p>
</blockquote>
<h3 id="callback"><a href="#callback" class="headerlink" title="callback"></a>callback</h3><p>回调函数，是jsonp里比传的参数</p>
<h2 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h2><p>面向对象编程</p>
<p>面向过程编程<br>    以过程为中心得编程思想<br>    缺点：不利于扩展</p>
<h3 id="面向对象三大特征："><a href="#面向对象三大特征：" class="headerlink" title="面向对象三大特征："></a>面向对象三大特征：</h3><p>封装、继承、多态</p>
<p>对象都有的属性：共性<br>特有的属性：特性</p>
<p>利用function创造一个工厂/流水线</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,sex</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">    obj.name = name;</span><br><span class="line">    obj.age = age;</span><br><span class="line">    obj.sex = sex;</span><br><span class="line">    <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p1 = Person(<span class="string">"刘谣"</span>,<span class="number">20</span>,<span class="string">"男"</span>);</span><br></pre></td></tr></table></figure>

<h3 id="new"><a href="#new" class="headerlink" title="new"></a>new</h3><blockquote>
<p>通过new关键字执行的函数，new后面的函数叫做构造函数</p>
</blockquote>
<blockquote>
<p><code>new的特性</code>：<br>    每次执行函数都会在函数内部创建一个对象，最终会把这个对象返回出来，对象是引用性数据类型，所以每次new执行调用函数时，返回的都是一个新的对象</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">"字符串1"</span>, <span class="comment">//字面量</span></span><br><span class="line">    b = <span class="built_in">String</span>(<span class="string">"字符串2"</span>), <span class="comment">//String方法/内建方法</span></span><br><span class="line">    c = <span class="keyword">new</span> <span class="built_in">String</span>(字符串<span class="string">"); //构造函数</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>new执行构造函数的过程：叫做构造函数的实例化/类的实例化；<br>构造函数执行结束以后返回的对象：叫做实例/实例化对象</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,sex</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">    <span class="keyword">this</span>.age = age;</span><br><span class="line">    <span class="keyword">this</span>.sex = sex;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Person(<span class="string">"刘谣"</span>,<span class="number">20</span>,<span class="string">"男"</span>);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>使用new会隐式创建一个对象并返回出来，并且构造函数中的this会指向new创建的那个对象<br>就不需要var一个对象并return</p>
</blockquote>
<blockquote>
<p>构造函数一般的函数名一般第一个字母大写</p>
</blockquote>
<h3 id="原型prototype"><a href="#原型prototype" class="headerlink" title="原型prototype"></a>原型prototype</h3><blockquote>
<p>就是一个仓库，并且仓库里的东西都是共享的，里面存储的每个对象都可以共享方法/属性<br>本质上是一个对象</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,sex</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//私有属性--&gt;实例对象的属性</span></span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">    <span class="keyword">this</span>.age = age;</span><br><span class="line">    <span class="keyword">this</span>.sex = sex;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//原型方法</span></span><br><span class="line">Person.prototype = &#123;</span><br><span class="line">    <span class="comment">//共有属性</span></span><br><span class="line">    say : <span class="function"><span class="keyword">function</span> (<span class="params">say</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(say);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="keyword">constructor</span> : Person</span><br><span class="line">&#125;;</span><br><span class="line">var p1 = new Person("刘谣",20,"男");</span><br><span class="line">p1.say("我是"+this.name);</span><br></pre></td></tr></table></figure>

<h3 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h3><p>所有的仓库<br>“1”._<em>proto_</em></p>
<p><code>__proto__</code>： 原型链，就是一个引用<br>所有的对象都有的属性，除了null和undefined</p>
<blockquote>
<p>原型链：一个对象的原型（__proto__）指向它的构造函数那个仓库的原型对象（prototype）的原型（__proto__）<br>在找原型时，只会在构造函数的原型里面找，不会构造函数的私有属性里面找</p>
</blockquote>
<blockquote>
<p>实例对象的<code>__proto__</code>指向生成这个实例对象的构造函数的原型对象，既是构造函数的prototype原型对象</p>
</blockquote>
<p>prototype ： 原型对象<br>只有函数/方法才有的属性</p>
<blockquote>
<p>原型（prototype）是一个对象，这个对象的__proto__指向创建这个对象的构造函数的原型（prototype）</p>
</blockquote>
<p>constructor：每个原型都有constructor属性，指向当前原型的构造函数</p>
<blockquote>
<p>【先创建构造函数，在创建实例化对象】</p>
</blockquote>
<h2 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h2><blockquote>
<p>多种状态，根据参数的不同，做出不同的反馈</p>
</blockquote>
<h2 id="es6新增"><a href="#es6新增" class="headerlink" title="es6新增"></a>es6新增</h2><h3 id="let-const-class-import"><a href="#let-const-class-import" class="headerlink" title="let const class import"></a>let const class import</h3><p>es5 ：全局作用域、局部作用域<br>es6 ：全局作用域、函数作用域、块作用域</p>
<h3 id="const-声明常量"><a href="#const-声明常量" class="headerlink" title="const 声明常量"></a>const 声明常量</h3><p>声明时必须赋值，后续不可以进行第二次等号操作，引用性数据类型是可以向变量里面添加内容的</p>
<h3 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h3><p>本质上是一种模式，只要等号两边的结构值相同，那么等号左边的变量就会被赋予对应的值。</p>
<ul>
<li>当右边的值比左边的变量少的时候，左边的变量会自动赋予undefined</li>
<li>左右值不对应时，左边多余的变量会赋予undefined值，右边多余的时候多余的不管</li>
<li>默认值：在左边给变量用=赋予默认值，默认值只有在变量匹配到undefined的时候才会生效，如果匹配到了值，则使用右边的值</li>
</ul>
<h4 id="扩展运算符-“…”"><a href="#扩展运算符-“…”" class="headerlink" title="扩展运算符 “…”"></a>扩展运算符 “…”</h4><p>将数组/类数组展开，将展开的东西变为数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [a , ...b] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="comment">//a = 1</span></span><br><span class="line"><span class="comment">//b = [2,3,4,5]</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>,</span><br><span class="line">    b = <span class="number">2</span>;</span><br><span class="line">[a,b]=[b,a]</span><br><span class="line"><span class="comment">//a = 2 , b = 1</span></span><br></pre></td></tr></table></figure>

<h3 id="includes"><a href="#includes" class="headerlink" title="includes()"></a>includes()</h3><p>查找xxx字符串，返回布尔值true/false</p>
<h3 id="starrsWith"><a href="#starrsWith" class="headerlink" title="starrsWith()"></a>starrsWith()</h3><p>判断是否以xxx字符开头，返回布尔值true/false</p>
<h3 id="endsWith"><a href="#endsWith" class="headerlink" title="endsWith()"></a>endsWith()</h3><p>判断是否以xxx字符结尾，返回布尔值true/false</p>
<h3 id="repeat-n"><a href="#repeat-n" class="headerlink" title="repeat(n)"></a>repeat(n)</h3><p>重复原字符串n次返回出一个新字符串，并且默认向下取整。</p>
<ul>
<li>-1到+1取0</li>
<li>false为0</li>
<li>true为1</li>
<li>NaN为0</li>
<li>字符串会默认转化为数字，转化不了时为false，即为0</li>
</ul>
<h2 id="padStart-n-str-padEnd-n-str"><a href="#padStart-n-str-padEnd-n-str" class="headerlink" title="padStart(n,str) padEnd(n,str)"></a>padStart(n,str) padEnd(n,str)</h2><p>es8的方法<br>“str”可以没有，默认补全空格<br>n小于等于原字符串的长度时，返回原字符串</p>
<h3 id="padStart"><a href="#padStart" class="headerlink" title="padStart()"></a>padStart()</h3><p>往字符串前面补全到设置长度，返回新字符串</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"abc"</span>.padStart(<span class="number">5</span>,<span class="string">"defg"</span>);</span><br><span class="line"><span class="comment">//str = "abcde"</span></span><br></pre></td></tr></table></figure>

<h3 id="padEnd"><a href="#padEnd" class="headerlink" title="padEnd()"></a>padEnd()</h3><p>往后补全，与padStart()同理</p>
<p>isFinite() 检测是否为一个有限数值<br>Infinity 无穷大</p>
<h2 id="es6"><a href="#es6" class="headerlink" title="es6"></a>es6</h2><p>Number.isFinite() 不会进行隐式类型转换</p>
<h4 id="Number-isInteger-判断整数"><a href="#Number-isInteger-判断整数" class="headerlink" title="Number.isInteger() 判断整数"></a>Number.isInteger() 判断整数</h4><p>有精度问题</p>
<h3 id="Math函数-1"><a href="#Math函数-1" class="headerlink" title="Math函数"></a>Math函数</h3><h4 id="Math-trunc"><a href="#Math-trunc" class="headerlink" title="Math.trunc()"></a>Math.trunc()</h4><p>砍掉小数点，会隐式调用Number进行类型转换</p>
<h4 id="Math-sign"><a href="#Math-sign" class="headerlink" title="Math.sign()"></a>Math.sign()</h4><p>整数返回+1，负数返回-1，-0返回-0,0返回0</p>
<h4 id="Math-cbrt-计算一个立方根"><a href="#Math-cbrt-计算一个立方根" class="headerlink" title="Math.cbrt() 计算一个立方根"></a>Math.cbrt() 计算一个立方根</h4><h4 id="Math-hypot-勾股定理，求第三边"><a href="#Math-hypot-勾股定理，求第三边" class="headerlink" title="Math.hypot() 勾股定理，求第三边"></a>Math.hypot() 勾股定理，求第三边</h4><p>es7新增指数运算符 **<br>2*<em>3 = 2</em>2*2 = 8</p>
<h2 id="函数的扩展"><a href="#函数的扩展" class="headerlink" title="函数的扩展"></a>函数的扩展</h2><ul>
<li>当()里面没有参数默认值的时候，默认声明变量的方式是var</li>
<li>当参数有默认值的时候，为let声明</li>
</ul>
<p>arguments实际获取的是实参</p>
<h3 id="临时作用域"><a href="#临时作用域" class="headerlink" title="临时作用域"></a>临时作用域</h3><ul>
<li>当函数的形参有默认值的时候，整个()内会形成一个作用域</li>
<li>当设置默认值时，会先在()内的作用域里面找，如果没有再在此函数上面的全局作用域中找</li>
<li>暂时性死区<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x = x</span>)</span>&#123;&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<blockquote>
<p>var没有暂时性死区</p>
</blockquote>
<h3 id="rest参数-…参数名"><a href="#rest参数-…参数名" class="headerlink" title="rest参数 …参数名"></a>rest参数 …参数名</h3><h3 id="箭头函数-gt"><a href="#箭头函数-gt" class="headerlink" title="箭头函数 () =&gt; {}"></a>箭头函数 () =&gt; {}</h3><p>箭头右边如果只有一个表达式或者一个变量的时候表示返回这个东西</p>
<ul>
<li>通常箭头函数用在回调函数上</li>
<li>箭头函数，本质上是一个表达式，它没有this</li>
<li>this固定为父作用域的this</li>
<li>不能使用arguments，要使用rest参数代替</li>
<li>不可以把箭头函数当做构造函数</li>
</ul>
<h2 id="数组的扩展"><a href="#数组的扩展" class="headerlink" title="数组的扩展"></a>数组的扩展</h2><h3 id="拷贝数组"><a href="#拷贝数组" class="headerlink" title="拷贝数组"></a>拷贝数组</h3><h4 id="arr-concat"><a href="#arr-concat" class="headerlink" title="arr.concat();"></a>arr.concat();</h4><h4 id="…arr"><a href="#…arr" class="headerlink" title="…arr"></a>…arr</h4><h4 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h4><ul>
<li>复制数组时，如果原数组的成员里有一个引用性数据，那么复制原数组时，新数组的这个引用性数据和原数组中的是一样的，指向同一个内存地址</li>
</ul>
<h3 id="Object-assgin-合并对象"><a href="#Object-assgin-合并对象" class="headerlink" title="Object.assgin() 合并对象"></a>Object.assgin() 合并对象</h3><p>Object.assgin(obj1, obj2, obj3)<br>将obj2和obj3合并到obj1中，改变了obj1，obj2和obj3不变</p>
<h3 id="Object-keys-键名"><a href="#Object-keys-键名" class="headerlink" title="Object.keys() 键名"></a>Object.keys() 键名</h3><h3 id="Object-values-键值"><a href="#Object-values-键值" class="headerlink" title="Object.values() 键值"></a>Object.values() 键值</h3><h3 id="Object-entries-键值对"><a href="#Object-entries-键值对" class="headerlink" title="Object.entries() 键值对"></a>Object.entries() 键值对</h3><p>用一个数组存键[0]和值[1]</p>
<h2 id="判断一个对象是否是数组"><a href="#判断一个对象是否是数组" class="headerlink" title="判断一个对象是否是数组"></a>判断一个对象是否是数组</h2><h3 id="Array-isArray-obj"><a href="#Array-isArray-obj" class="headerlink" title="Array.isArray(obj)"></a>Array.isArray(obj)</h3><h3 id="obj-instanceof-Array"><a href="#obj-instanceof-Array" class="headerlink" title="obj instanceof Array"></a>obj instanceof Array</h3><h3 id="判断是否有length-join-constructor-Array"><a href="#判断是否有length-join-constructor-Array" class="headerlink" title="判断是否有length/join/constructor === Array"></a>判断是否有length/join/constructor === Array</h3><h2 id="jq操作"><a href="#jq操作" class="headerlink" title="jq操作"></a>jq操作</h2><h3 id="offset"><a href="#offset" class="headerlink" title="$().offset()"></a>$().offset()</h3><p>返回一个包含元素到文档顶部（包括未显示的top/left区域，包括margin值）的top/left值得对象</p>
<h3 id="1-offset-top-num-left-num"><a href="#1-offset-top-num-left-num" class="headerlink" title="1.$().offset({top: num,left: num})"></a>1.$().offset({top: num,left: num})</h3><p>当传值的时候，会强制将元素的top/left值变更达到元素距离文档上左的距离只有num值</p>
<h3 id="position"><a href="#position" class="headerlink" title="$().position()"></a>$().position()</h3><p>返回一个包含元素到定位父级的top/left值的对象</p>
<h3 id="srollTop"><a href="#srollTop" class="headerlink" title="$().srollTop()"></a>$().srollTop()</h3><p>返回当前元素滚动条的高度</p>
<h3 id="3-srollTop-num"><a href="#3-srollTop-num" class="headerlink" title="3.$().srollTop(num)"></a>3.$().srollTop(num)</h3><p>当有传值的时候，触发一个事件时，回时元素立刻到达设置的nun滚动条的高度</p>
<h3 id="4、获取宽度"><a href="#4、获取宽度" class="headerlink" title="4、获取宽度"></a>4、获取宽度</h3><h4 id="lt-1-gt-width"><a href="#lt-1-gt-width" class="headerlink" title="&lt;1&gt; $().width()"></a>&lt;1&gt; $().width()</h4><p>元素设置的width为多少返回的就是多少</p>
<h4 id="lt-2-gt-innerWidth"><a href="#lt-2-gt-innerWidth" class="headerlink" title="&lt;2&gt; $().innerWidth()"></a>&lt;2&gt; $().innerWidth()</h4><p>返回元素的width+内部的距离(padding)</p>
<h4 id="lt-3-gt-outerWidth"><a href="#lt-3-gt-outerWidth" class="headerlink" title="&lt;3&gt; $().outerWidth()"></a>&lt;3&gt; $().outerWidth()</h4><p>返回元素的width+外部的距离(margin)</p>
<h4 id="lt-4-gt-传值的时候"><a href="#lt-4-gt-传值的时候" class="headerlink" title="&lt;4&gt; 传值的时候"></a>&lt;4&gt; 传值的时候</h4><ul>
<li>$().width(num)<br>会强行改掉元素的宽度width</li>
<li>$().innerWidth(num)<br>会强行改成元素的宽度width使得width+padding的值等于num</li>
<li>$().outerWidth(num)<br>会强行改成元素的宽度width使得width+margin的值等于num</li>
</ul>
<h3 id="map-function-index-val"><a href="#map-function-index-val" class="headerlink" title="$().map(function(index,val){})"></a>$().map(function(index,val){})</h3><ul>
<li>index：下标</li>
<li>val：dom元素节点</li>
<li>return：写什么返回什么</li>
</ul>
<h3 id="each-function-index-val"><a href="#each-function-index-val" class="headerlink" title="$().each(function(index,val){})"></a>$().each(function(index,val){})</h3><ul>
<li>index：同上</li>
<li>val：同上</li>
<li>return：管你写什么，老子就返回操作对象</li>
</ul>
<h2 id="获取地理位置"><a href="#获取地理位置" class="headerlink" title="获取地理位置"></a>获取地理位置</h2><p>使用navigator下面的geolocation()方法获取用户位置</p>
<ul>
<li><p>检测是否支持地理定位</p>
</li>
<li><p>如果支持，则运行getCurrentPositio()方法。如果不支持，则向用户显示一段消息。</p>
</li>
<li><p>如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象</p>
</li>
<li><p>如果运行失败，则向参数showError中规定的函数返回错误信息</p>
<ul>
<li>Permission denied—用户不允许地理定位</li>
<li>Position unavailable - 无法获取当前位置</li>
<li>Timeout - 操作超时</li>
</ul>
</li>
<li><p>showPosition()函数获得并显示经度和纬度</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getLocation</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (navigator.geolocation)&#123;</span><br><span class="line">        navigator.geolocation.getCurrentPosition(showPosition,showError);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        alert(<span class="string">"Geolocation is not supported by this browser."</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 获取成功</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showPosition</span>(<span class="params">position</span>)</span></span><br><span class="line"><span class="function">  </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> lat = position.coords.latitude; <span class="comment">//经度</span></span><br><span class="line">  <span class="keyword">let</span> lon = position.coords.longitude; <span class="comment">//纬度</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">//获取失败运行</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showError</span>(<span class="params">error</span>)</span></span><br><span class="line"><span class="function">  </span>&#123;</span><br><span class="line">  <span class="keyword">switch</span>(error.code)</span><br><span class="line">    &#123;</span><br><span class="line">    <span class="keyword">case</span> error.PERMISSION_DENIED:</span><br><span class="line">      x.innerHTML=<span class="string">"User denied the request for Geolocation."</span></span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> error.POSITION_UNAVAILABLE:</span><br><span class="line">      x.innerHTML=<span class="string">"Location information is unavailable."</span></span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> error.TIMEOUT:</span><br><span class="line">      x.innerHTML=<span class="string">"The request to get user location timed out."</span></span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> error.UNKNOWN_ERROR:</span><br><span class="line">      x.innerHTML=<span class="string">"An unknown error occurred."</span></span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h2 id="console的方法"><a href="#console的方法" class="headerlink" title="console的方法"></a>console的方法</h2><ul>
<li><p>console.log()</p>
</li>
<li><p>console.dir()</p>
</li>
<li><p>console.error() 以红色报错的形式输出</p>
</li>
<li><p>console.time(“tag”); console.timeEnd(“tag”) 设定一个tag标记点，打印之间代码执行时间，误差很大</p>
</li>
<li><p>Console.assert() 判断第一个参数是否为真，false的话抛出异常并且在控制台输出相应信息。</p>
</li>
<li><p>Console.clear() 清空控制台。</p>
</li>
<li><p>Console.count() 以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。</p>
</li>
<li><p>Console.debug() console.log方法的别称，使用方法可以参考Console.log()</p>
</li>
<li><p>Console.dir()  打印一条以三角形符号开头的语句，可以点击三角展开查看对象的属性。</p>
</li>
<li><p>Console.dirxml()  如果可以，打印 XML/HTML 元素表示的指定对象，或者 JavaScript 对象视图。</p>
</li>
<li><p>Console.error() 打印一条错误信息，使用方法可以参考 string substitution。</p>
</li>
<li><p>Console._exception()    error方法的别称，使用方法参考Console.error()</p>
</li>
<li><p>Console.group() 打印树状结构，配合groupCollapsed以及groupEnd方法;</p>
</li>
<li><p>Console.groupCollapsed() 创建一个新的内联 group。使用方法和group相同，不同的是groupCollapsed打印出来的内容默认是折叠的。</p>
</li>
<li><p>Console.groupEnd() 结束当前Tree</p>
</li>
<li><p>Console.info() 打印以感叹号字符开始的信息，使用方法和log相同</p>
</li>
<li><p>Console.log() 打印字符串，使用方法比较类似C的printf格式输出，可参考 string substitution 。</p>
</li>
<li><p>Console.profile() 可以以第一个参数为标识，开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似，具体可参考chrome profiles</p>
</li>
<li><p>Console.profileEnd() 配合profile方法，作为数据收集的结束。</p>
</li>
<li><p>Console.table() 将数据打印成表格。Console.table [en-US]</p>
</li>
<li><p>Console.time() 计时器，接受一个参数作为标识。</p>
</li>
<li><p>Console.timeEnd() 接受一个参数作为标识，结束特定的计时器。</p>
</li>
<li><p>Console.timeStamp()  添加一个标记到浏览器的 Timeline 或 Waterfall 工具.</p>
</li>
<li><p>Console.trace() 打印stack trace.</p>
</li>
<li><p>Console.warn() 打印一个警告信息，使用方法可以参考 string substitution。</p>
</li>
</ul>
<h2 id="ajax-1"><a href="#ajax-1" class="headerlink" title="ajax"></a>ajax</h2><h3 id="get接收"><a href="#get接收" class="headerlink" title="get接收"></a>get接收</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> xhr = <span class="keyword">new</span> XMLHttpRequest()</span><br><span class="line"><span class="comment">// 发送</span></span><br><span class="line">xhr.open(<span class="string">"GET"</span>,URL,<span class="literal">true</span>/<span class="literal">false</span>)</span><br><span class="line"><span class="comment">// 监听</span></span><br><span class="line">xhr.send()</span><br><span class="line"></span><br><span class="line">xhr.onload/onreadystatechange = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 判断ajax本身的状态码</span></span><br><span class="line">    <span class="keyword">if</span>(xhr.readyState === <span class="number">4</span>)&#123;</span><br><span class="line">        <span class="comment">// 判断服务器状态码</span></span><br><span class="line">        <span class="keyword">if</span>( <span class="number">200</span> &lt;= xhr.status &amp;&amp; xhr.status &lt; <span class="number">300</span> || xhr.status === <span class="number">304</span> )&#123;</span><br><span class="line">            <span class="comment">// 请求成功</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">// 服务器返回的数据</span></span><br><span class="line">            xhr.responseText</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="post发送"><a href="#post发送" class="headerlink" title="post发送"></a>post发送</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> xhr = <span class="keyword">new</span> XMLHttpRequest()</span><br><span class="line">xhr.open(<span class="string">"POST"</span>,URL,<span class="literal">true</span>/<span class="literal">false</span>)</span><br><span class="line"><span class="comment">// 请求头</span></span><br><span class="line">xhr.setRequestHeader(<span class="string">"Content-Type"</span>,<span class="string">"application/x-WWW-form-urlencoded"</span>)</span><br><span class="line">xhr.send(<span class="string">"user=xxxx&amp;pwd=xxxx"</span>)</span><br><span class="line"></span><br><span class="line">xhr.onload/onreadystatechange = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 判断ajax本身的状态码</span></span><br><span class="line">    <span class="keyword">if</span>(xhr.readyState === <span class="number">4</span>)&#123;</span><br><span class="line">        <span class="comment">// 判断服务器状态码</span></span><br><span class="line">        <span class="keyword">if</span>( <span class="number">200</span> &lt;= xhr.status &amp;&amp; xhr.status &lt; <span class="number">300</span> || xhr.status === <span class="number">304</span> )&#123;</span><br><span class="line">            <span class="comment">// 请求成功</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">// 服务器返回的数据</span></span><br><span class="line">            xhr.responseText</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="jq封装的方法"><a href="#jq封装的方法" class="headerlink" title="jq封装的方法"></a>jq封装的方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">    url : url,</span><br><span class="line">    <span class="comment">// 根据GET/POST自动选择调用参数</span></span><br><span class="line">    method : <span class="string">"POST/GET"</span>,</span><br><span class="line">    data : &#123;</span><br><span class="line">        user : xxxx,</span><br><span class="line">        pwd : xxxx</span><br><span class="line">    &#125;,</span><br><span class="line">    success(data)&#123;</span><br><span class="line">        <span class="comment">// 请求成功</span></span><br><span class="line">    &#125;,</span><br><span class="line">    error()&#123;</span><br><span class="line">        <span class="comment">// 请求失败</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><blockquote>
<p>浏览器不允许跨域请求<br>cors、反向代理、jsonp</p>
</blockquote>
<ul>
<li>实现跨域：<ul>
<li>通过script的src：属性具备跨域请求资源的能力，JSONP形式</li>
<li>CORS 在后台程序里，设置可以让对应域进行访问</li>
</ul>
</li>
</ul>
<h2 id="jsonp-1"><a href="#jsonp-1" class="headerlink" title="jsonp"></a>jsonp</h2><blockquote>
<p>jsonp是json的一种使用模式</p>
<ul>
<li>作用：跨域获取数据</li>
<li>callback：回调函数</li>
</ul>
</blockquote>
<h2 id="类库-工具api的集合"><a href="#类库-工具api的集合" class="headerlink" title="类库(工具api的集合)"></a>类库(工具api的集合)</h2><p>jQuery</p>
<h2 id="框架"><a href="#框架" class="headerlink" title="框架"></a>框架</h2><p>vue react</p>
<h3 id="jQuery"><a href="#jQuery" class="headerlink" title="jQuery"></a>jQuery</h3><h3 id="each-i-v-s-gt"><a href="#each-i-v-s-gt" class="headerlink" title="$().each( (i, v, s) =&gt; {} )"></a>$().each( (i, v, s) =&gt; {} )</h3><ul>
<li>i 序号</li>
<li>v 值，一个个的对象</li>
<li>s 自己本身</li>
</ul>
<h3 id="length"><a href="#length" class="headerlink" title="$().length"></a>$().length</h3><p>长度</p>
<h3 id="“xxx”-context"><a href="#“xxx”-context" class="headerlink" title="$(“xxx”, context)"></a>$(“xxx”, context)</h3><p>$(“xxx”).context指向给的context对象</p>
<h3 id="get-index"><a href="#get-index" class="headerlink" title="$().get(index)"></a>$().get(index)</h3><ul>
<li>$()[index] 转原生对象</li>
<li>转jq对象 $(原生对象)</li>
</ul>
<h3 id="index"><a href="#index" class="headerlink" title="$().index()"></a>$().index()</h3><ul>
<li>不传值，返回在父级的下标</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"p1"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">$(<span class="string">".p1"</span>).index(); <span class="comment">//0</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="data"><a href="#data" class="headerlink" title="$().data()"></a>$().data()</h3><blockquote>
<p>h5规定自定义标签属性前加上data</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">data-liuyao</span>=<span class="string">"liuyao"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="built_in">console</span>.log( $(<span class="string">"div"</span>).data(liuyao) ); <span class="comment">//liuyao</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>removedata() 移除使用jq添加的属性【没什么卵用】</li>
</ul>
<h2 id="jq选择器"><a href="#jq选择器" class="headerlink" title="jq选择器"></a>jq选择器</h2><h3 id="“xxx-first”"><a href="#“xxx-first”" class="headerlink" title="$(“xxx:first”)"></a>$(“xxx:first”)</h3><p>第一个</p>
<h3 id="“xxx-last”"><a href="#“xxx-last”" class="headerlink" title="$(“xxx:last”)"></a>$(“xxx:last”)</h3><p>最后一个</p>
<h3 id="“xxx-not-XXX-”"><a href="#“xxx-not-XXX-”" class="headerlink" title="$(“xxx:not(XXX)”)"></a>$(“xxx:not(XXX)”)</h3><p>不包括XXX</p>
<h3 id="“xxx-even”"><a href="#“xxx-even”" class="headerlink" title="$(“xxx:even”)"></a>$(“xxx:even”)</h3><h3 id="“xxx-odd”"><a href="#“xxx-odd”" class="headerlink" title="$(“xxx:odd”)"></a>$(“xxx:odd”)</h3><h3 id="“xxx-eq-index-”"><a href="#“xxx-eq-index-”" class="headerlink" title="$(“xxx:eq(index)”)"></a>$(“xxx:eq(index)”)</h3><p>选择下标为index的</p>
<h3 id="“xxx-gt-index-”"><a href="#“xxx-gt-index-”" class="headerlink" title="$(“xxx:gt(index)”)"></a>$(“xxx:gt(index)”)</h3><p>选择下标大于index的</p>
<h3 id="“xxx-lt-index-”"><a href="#“xxx-lt-index-”" class="headerlink" title="$(“xxx:lt(index)”)"></a>$(“xxx:lt(index)”)</h3><p>匹配所有小于给定索引值的元素</p>
<h3 id="“xxx-contains-text-”"><a href="#“xxx-contains-text-”" class="headerlink" title="$(“xxx:contains(text)”)"></a>$(“xxx:contains(text)”)</h3><p>匹配包含给定文本的元素</p>
<h3 id="“xxx-animated”"><a href="#“xxx-animated”" class="headerlink" title="$(“xxx:animated”)"></a>$(“xxx:animated”)</h3><p>匹配所有正在执行动画效果的元素</p>
<h3 id="“-empty”"><a href="#“-empty”" class="headerlink" title="$(“:empty”)"></a>$(“:empty”)</h3><p>匹配所有不包含子元素或者文本的空元素</p>
<ul>
<li>换行的选不到，空格换行属于字符</li>
</ul>
<h3 id="“xxx-parent”"><a href="#“xxx-parent”" class="headerlink" title="$(“xxx:parent”)"></a>$(“xxx:parent”)</h3><p>匹配含有子元素或者文本的元素</p>
<ul>
<li>没有子元素或者没有文本就取不到</li>
</ul>
<h3 id="“xxx-has-XXX-”"><a href="#“xxx-has-XXX-”" class="headerlink" title="$(“xxx:has(XXX)”)"></a>$(“xxx:has(XXX)”)</h3><p>匹配含有XXX的xxx元素</p>
<h3 id="“xxx-hidden”"><a href="#“xxx-hidden”" class="headerlink" title="$(“xxx:hidden”)"></a>$(“xxx:hidden”)</h3><p>匹配所有不可见元素，或者type为hidden的元素</p>
<h3 id="“xxx-visible”"><a href="#“xxx-visible”" class="headerlink" title="$(“xxx:visible”)"></a>$(“xxx:visible”)</h3><p>匹配所有的可见元素</p>
<h3 id="“xxx-attribute-”"><a href="#“xxx-attribute-”" class="headerlink" title="$(“xxx[attribute]”)"></a>$(“xxx[attribute]”)</h3><blockquote>
<p>匹配包含给定属性的元素，attribute元素的属性</p>
<ul>
<li>$(“xxx[id=div]”)</li>
<li>$(“xxx[id!=thediv]”)</li>
<li>$(“xxx[id^=’t’]”)</li>
<li>$(“xxx[id$=’v’]”)</li>
<li>$(“xxx[id*=’edi’]”)</li>
<li>$(“xxx[id][class=’box’][name]”)</li>
</ul>
</blockquote>
<h3 id="“xxx-checked”"><a href="#“xxx-checked”" class="headerlink" title="$(“xxx:checked”)"></a>$(“xxx:checked”)</h3><p>匹配所有选中的被选中元素</p>
<h2 id="jq属性api"><a href="#jq属性api" class="headerlink" title="jq属性api"></a>jq属性api</h2><blockquote>
<p>处理对象的核心思想：get first / set all</p>
</blockquote>
<ul>
<li><p>get(获取)操作默认获取第一个</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取第一个class为box的name</span></span><br><span class="line">$(<span class="string">".box"</span>).prop(<span class="string">"name"</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>set(设置)操作默认为设置全部</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置全部class为box的name为aaa</span></span><br><span class="line">$(<span class="string">".box"</span>).prop(<span class="string">"name"</span>,<span class="string">"aaa"</span>)</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="attr"><a href="#attr" class="headerlink" title="attr"></a>attr</h3><ul>
<li>主要用来操作自定义属性</li>
<li>类似getAttribute和setAttribute操作</li>
<li>获取值为布尔值的属性返回布尔值</li>
<li>而getAttribute和setAttribute在获取checked此类属性是返回checked的值，不一定返回布尔值</li>
</ul>
<h3 id="prop"><a href="#prop" class="headerlink" title="prop"></a>prop</h3><ul>
<li>主要用来操作合法属性</li>
<li>类似obj.id操作</li>
</ul>
<h3 id="removeAttr"><a href="#removeAttr" class="headerlink" title="removeAttr"></a>removeAttr</h3><p>删除自定义属性</p>
<h3 id="removeProp"><a href="#removeProp" class="headerlink" title="removeProp"></a>removeProp</h3><p>删除合法属性</p>
<h3 id="addClass"><a href="#addClass" class="headerlink" title="addClass()"></a>addClass()</h3><p>添加class类名</p>
<h3 id="removerClass"><a href="#removerClass" class="headerlink" title="removerClass()"></a>removerClass()</h3><p>删除class类名</p>
<h3 id="hasClass"><a href="#hasClass" class="headerlink" title="hasClass()"></a>hasClass()</h3><p>有没有某某class类名</p>
<h3 id="toggleClass"><a href="#toggleClass" class="headerlink" title="toggleClass()"></a>toggleClass()</h3><p>没有添加，有则删除</p>
<h3 id="html"><a href="#html" class="headerlink" title="html()"></a>html()</h3><ul>
<li>对应innerHTML</li>
<li>没有参数为取值</li>
<li>有参数为设置</li>
</ul>
<h3 id="text"><a href="#text" class="headerlink" title="text()"></a>text()</h3><ul>
<li>对应innerText</li>
<li>没有参数为取值</li>
<li>有参数为设置</li>
</ul>
<h3 id="val"><a href="#val" class="headerlink" title="val()"></a>val()</h3><ul>
<li>对应value</li>
<li>没有参数为取值</li>
<li>有参数为设置</li>
</ul>
<h2 id="jqCSSapi"><a href="#jqCSSapi" class="headerlink" title="jqCSSapi"></a>jqCSSapi</h2><h3 id="css"><a href="#css" class="headerlink" title="css()"></a>css()</h3><ul>
<li><p>获取时取第一个并只能获取一个属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取高度</span></span><br><span class="line">$(<span class="string">".box"</span>).css(<span class="string">"height"</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>整个集合全部设置</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">".box"</span>).css(&#123;</span><br><span class="line">    width : <span class="number">200</span>,</span><br><span class="line">    heigth : <span class="number">200</span>,</span><br><span class="line">    backgroundColor : <span class="string">"red"</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="offset-1"><a href="#offset-1" class="headerlink" title="offset()"></a>offset()</h3><p>没参数时返回一个包含元素到(视口)文档顶部(包括未显示的top/left区域，包括margin值)的top/left值得对象</p>
<h3 id="offset-top-num-left-num"><a href="#offset-top-num-left-num" class="headerlink" title="$().offset({top: num,left: num})"></a>$().offset({top: num,left: num})</h3><p>当传值的时候，会强制将元素的top/left值变更达到元素距离文档上方、左方的距离只有num值</p>
<h3 id="position-1"><a href="#position-1" class="headerlink" title="$().position()"></a>$().position()</h3><p>返回一个包含元素到<code>定位父级</code>的top/left值的对象</p>
<h3 id="srollTop-1"><a href="#srollTop-1" class="headerlink" title="$().srollTop()"></a>$().srollTop()</h3><p>返回当前元素纵向滚动条的高度</p>
<h3 id="srollTop-num"><a href="#srollTop-num" class="headerlink" title="$().srollTop(num)"></a>$().srollTop(num)</h3><p>当有传值的时候，触发一个事件时，元素纵向滚动条立刻到达设置的num的高度</p>
<h3 id="srollLeft"><a href="#srollLeft" class="headerlink" title="$().srollLeft()"></a>$().srollLeft()</h3><p>返回当前元素的高度</p>
<h3 id="srollLeft-num"><a href="#srollLeft-num" class="headerlink" title="$().srollLeft(num)"></a>$().srollLeft(num)</h3><p>当有传值的时候，触发一个事件时，元素横向滚动条立刻到达设置的num的高度</p>
<h3 id="height"><a href="#height" class="headerlink" title="$().height()"></a>$().height()</h3><ul>
<li>无参数，获取高度</li>
<li>有参数，设置高度</li>
</ul>
<h3 id="width"><a href="#width" class="headerlink" title="$().width()"></a>$().width()</h3><ul>
<li>无参数，获取宽度</li>
<li>有参数，设置宽度</li>
</ul>
<h3 id="innerHeight"><a href="#innerHeight" class="headerlink" title="$().innerHeight()"></a>$().innerHeight()</h3><ul>
<li>无参数，获取内部区域高度(包括补白、不包括边框)</li>
<li>对可见和隐藏元素均有效</li>
</ul>
<h3 id="innerWidth"><a href="#innerWidth" class="headerlink" title="$().innerWidth()"></a>$().innerWidth()</h3><ul>
<li>无参数，获取内部区域宽度(包括补白、不包括边框)</li>
<li>此方法对可见和隐藏元素均有效</li>
</ul>
<h3 id="outerHeight"><a href="#outerHeight" class="headerlink" title="$().outerHeight()"></a>$().outerHeight()</h3><ul>
<li>无参数，获取外部高度(默认包括补白和边框)</li>
<li>对可见和隐藏元素均有效</li>
</ul>
<h3 id="outerWidth"><a href="#outerWidth" class="headerlink" title="$().outerWidth()"></a>$().outerWidth()</h3><ul>
<li>无参数，获取外部宽度(默认包括补白和边框)</li>
<li>此方法对可见和隐藏元素均有效</li>
</ul>
<h2 id="jq文档处理"><a href="#jq文档处理" class="headerlink" title="jq文档处理"></a>jq文档处理</h2><h3 id="“div”-append-““"><a href="#“div”-append-““" class="headerlink" title="$(“div”).append(““)"></a>$(“div”).append(“<p></p>“)</h3><ul>
<li>向每个匹配的(div)元素内部<code>追加</code>(后面)内容(p标签)</li>
<li>这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"div"</span>).append( <span class="function">(<span class="params">index, html</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(rest);</span><br><span class="line">    <span class="comment">// index 为div的下标</span></span><br><span class="line">    <span class="comment">// html为div的内容</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">"&lt;p&gt;111&lt;/p&gt;"</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// ...rest用()框起来</span></span><br><span class="line">$().append( <span class="function">(<span class="params">...rest</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(rest);</span><br><span class="line">    <span class="comment">//</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">"&lt;p&gt;111&lt;/p&gt;"</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="“div”-prepend-““"><a href="#“div”-prepend-““" class="headerlink" title="$(“div”).prepend(““)"></a>$(“div”).prepend(“<p></p>“)</h3><ul>
<li>向每个匹配的(div)元素内部的最前面添加内容(p标签)</li>
</ul>
<h3 id="“p”-appendTo-“div”"><a href="#“p”-appendTo-“div”" class="headerlink" title="$(“p”).appendTo(“div”)"></a>$(“p”).appendTo(“div”)</h3><ul>
<li>会把原始的p移除</li>
<li>把所有的p标签(包括内容)放入每一个div中</li>
</ul>
<h3 id="“div”-after-““"><a href="#“div”-after-““" class="headerlink" title="$(“div”).after(““)"></a>$(“div”).after(“<p></p>“)</h3><ul>
<li>向每个匹配的(div)元素的后面添加内容(p标签)</li>
</ul>
<h3 id="““-insertAfter-“div”"><a href="#““-insertAfter-“div”" class="headerlink" title="$(““).insertAfter(“div”)"></a>$(“<p></p>“).insertAfter(“div”)</h3><ul>
<li>把(p标签)内容添加到匹配的(div)元素后面</li>
<li>与after一样</li>
</ul>
<h3 id="“div”-before-““"><a href="#“div”-before-““" class="headerlink" title="$(“div”).before(““)"></a>$(“div”).before(“<p></p>“)</h3><ul>
<li>向每个匹配的(div)元素的前面添加内容(p标签)</li>
<li>与after相反</li>
</ul>
<h3 id="““-insertBefore-“div”"><a href="#““-insertBefore-“div”" class="headerlink" title="$(““).insertBefore(“div”)"></a>$(“<p></p>“).insertBefore(“div”)</h3><ul>
<li>把(p标签)内容添加到匹配的(div)元素前面</li>
<li>与before一样</li>
<li>与insertAfter相反</li>
</ul>
<h3 id="“p”-wrap-““"><a href="#“p”-wrap-““" class="headerlink" title="$(“p”).wrap(““)"></a>$(“p”).wrap(“<div class="father"></div>“)</h3><ul>
<li>向匹配的(p)元素每一个都添加一个父级div</li>
<li>“认爹”</li>
</ul>
<h3 id="“p”-unwrap"><a href="#“p”-unwrap" class="headerlink" title="$(“p”).unwrap()"></a>$(“p”).unwrap()</h3><ul>
<li>移除匹配的(p)元素的父级</li>
<li>“逝父”</li>
</ul>
<h3 id="“p”-wrapAll"><a href="#“p”-wrapAll" class="headerlink" title="$(“p”).wrapAll()"></a>$(“p”).wrapAll()</h3><ul>
<li>向匹配的所有(p)元素添加同一个父级div</li>
<li>“大家一起认一个爹”</li>
</ul>
<h3 id="“div”-wrapInner-““"><a href="#“div”-wrapInner-““" class="headerlink" title="$(“div”).wrapInner(““)"></a>$(“div”).wrapInner(“<div class="father"></div>“)</h3><ul>
<li>将每一个匹配的div元素的子内容(包括文本节点)用一个新的div包裹起来</li>
<li>“儿子变孙子”</li>
</ul>
<h3 id="“p”-replaceWith-““"><a href="#“p”-replaceWith-““" class="headerlink" title="$(“p”).replaceWith(““)"></a>$(“p”).replaceWith(“<b></b>“)</h3><ul>
<li>将所有匹配的p元素替换成指定的HTML或DOM元素(b标签)</li>
</ul>
<h3 id="““-replaceAll-“p”"><a href="#““-replaceAll-“p”" class="headerlink" title="$(““).replaceAll(“p”)"></a>$(“<b></b>“).replaceAll(“p”)</h3><ul>
<li>用匹配的元素(b标签)替换掉所有匹配到的元素(p标签)</li>
</ul>
<h3 id="“div”-empty"><a href="#“div”-empty" class="headerlink" title="$(“div”).empty()"></a>$(“div”).empty()</h3><ul>
<li>把div内的所有元素(包括文本)<code>全部删除</code></li>
</ul>
<h3 id="“p”-remove"><a href="#“p”-remove" class="headerlink" title="$(“p”).remove()"></a>$(“p”).remove()</h3><ul>
<li>移除所有匹配的p标签</li>
<li>“自杀，并且所有遗产都没有”</li>
</ul>
<h3 id="“p”-detach"><a href="#“p”-detach" class="headerlink" title="$(“p”).detach()"></a>$(“p”).detach()</h3><ul>
<li>所有绑定的事件、附加的数据等都会保留下来</li>
<li>“自杀，保留遗产，为了复活”</li>
</ul>
<h3 id="“div”-clone-true-false"><a href="#“div”-clone-true-false" class="headerlink" title="$(“div”).clone(true/false)"></a>$(“div”).clone(true/false)</h3><ul>
<li>不传参默认浅克隆，true(深克隆)/false(浅克隆)<ul>
<li>与原生不一样</li>
<li>所有找到的div都会被克隆</li>
</ul>
</li>
<li>与原生cloneNode(true/false)类似<ul>
<li>true完全复制(深克隆)</li>
<li>false只复制标签外表，不包括内容(浅克隆)</li>
<li>原生克隆不会复制事件(例如click等事件，不管是一级还是二级)</li>
<li>被克隆对象在script中写所有事件和自定义属性都不会克隆</li>
<li>行内事件本质上是自执行的，为零级事件，与js内设置的绑定事件不一样；此时onclick相当于写了标签属性，所以写在行内时会克隆这个属性</li>
</ul>
</li>
</ul>
<h3 id="id的唯一性"><a href="#id的唯一性" class="headerlink" title="id的唯一性"></a>id的唯一性</h3><ul>
<li>id获取时，只会获取第一个，后面的不管</li>
<li>但不报错</li>
</ul>
<h2 id="es6-1"><a href="#es6-1" class="headerlink" title="es6"></a>es6</h2><h3 id="const-常量"><a href="#const-常量" class="headerlink" title="const 常量"></a>const 常量</h3><ul>
<li>申明的变量不能进行二次等号赋值，再次赋值会操错；</li>
<li>但引用性数据，例如[]数组,{}json对其添加内容不会报错;</li>
<li>只是不能改变它的地址指向，它并不是只读的，数组和json添加内容时都没有改变它的地址指向</li>
</ul>
<h3 id="解构赋值-1"><a href="#解构赋值-1" class="headerlink" title="解构赋值"></a>解构赋值</h3><ul>
<li>[] = []/{} = {}</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 对应赋值</span></span><br><span class="line"><span class="keyword">let</span> [a,b,c] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="comment">// 匹配模式，同名赋值</span></span><br><span class="line"><span class="comment">// 属性匹配，赋值</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">x</span>: d, <span class="attr">y</span>: e,&#125; = &#123;</span><br><span class="line">    x : <span class="number">4</span>,</span><br><span class="line">    y : <span class="number">5</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 属性名与值一致时可以简写</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">d</span>: d,<span class="attr">e</span>: e&#125; = &#123;</span><br><span class="line">    d : <span class="number">4</span>,</span><br><span class="line">    e : <span class="number">5</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> &#123;d,e&#125; = &#123;</span><br><span class="line">    d : <span class="number">4</span>,</span><br><span class="line">    e : <span class="number">5</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<ul>
<li>展开运算符“…”</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [...a] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="comment">// 将类数组展开转换成真的数组</span></span><br><span class="line"><span class="keyword">let</span> box = [...document.getElementsByTagName(<span class="string">"div"</span>)]</span><br></pre></td></tr></table></figure>

<ul>
<li>惰性求值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123;<span class="attr">a</span>: f = <span class="number">1</span>&#125; = &#123;</span><br><span class="line">    a : <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// f = 1</span></span><br></pre></td></tr></table></figure>

<ul>
<li>默认值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x = <span class="number">1</span>, y = <span class="number">2</span></span>)</span>&#123;&#125;</span><br><span class="line">fn()</span><br></pre></td></tr></table></figure>

<ul>
<li>使用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123; max, min &#125; = <span class="built_in">Math</span>;</span><br><span class="line">max(<span class="number">1</span>,<span class="number">10</span>) <span class="comment">// 10</span></span><br><span class="line">min(<span class="number">1</span>,<span class="number">10</span>) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> &#123;a,b,c&#125; = obj;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">arr</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> [a,b,c] = arr;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">[a,b,c]</span>)</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">fn(arr)</span><br><span class="line"><span class="comment">// es6中没arguments，不确定传的参数时用...</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">...a</span>)</span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="es6字符串扩展"><a href="#es6字符串扩展" class="headerlink" title="es6字符串扩展"></a>es6字符串扩展</h2><h3 id="查询-返回布尔值"><a href="#查询-返回布尔值" class="headerlink" title="查询(返回布尔值)"></a>查询(返回布尔值)</h3><h4 id="str-includes-str1-num"><a href="#str-includes-str1-num" class="headerlink" title="str.includes(str1, num)"></a>str.includes(str1, num)</h4><ul>
<li>str内是否存在str1</li>
<li>有返回true</li>
<li>没有返回false</li>
<li>num：从什么位置开始<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">"hello javascript"</span></span><br><span class="line">str.includes(<span class="string">"java"</span>) <span class="comment">//返回true，存在</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="str-startWith-str1-num"><a href="#str-startWith-str1-num" class="headerlink" title="str.startWith(str1, num)"></a>str.startWith(str1, num)</h4><ul>
<li>str是否以str1开始</li>
<li>有返回true</li>
<li>没有返回false</li>
<li>num：从什么位置开始<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">"hello javascript"</span></span><br><span class="line">str.includes(<span class="string">"java"</span>) <span class="comment">//返回true，存在</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="str-endWith-str1-length"><a href="#str-endWith-str1-length" class="headerlink" title="str.endWith(str1, length)"></a>str.endWith(str1, length)</h4><ul>
<li>str是否以str1结束</li>
<li>有返回true</li>
<li>没有返回false</li>
<li>length：选择字符串长度<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"> </span><br><span class="line">#### attributes</span><br><span class="line">&gt; 一个节点的所有属性</span><br><span class="line"></span><br><span class="line">- nodeName 属性名</span><br><span class="line">- nodeValue 属性值</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">#### document.createDocumentFragment()</span><br><span class="line">&gt; dom标签片段仓库</span><br><span class="line"></span><br><span class="line">- 虚拟的dom</span><br><span class="line">- 在需要连续添加dom节点时使用</span><br><span class="line">- 提高性能</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 回调地狱</span><br><span class="line"></span><br><span class="line">### Promise(异步操作)</span><br><span class="line">解决异步回调，但不是最优秀的</span><br><span class="line"></span><br><span class="line">```js</span><br><span class="line">Promise(异步操作)</span><br><span class="line">    .then(回调---1)</span><br><span class="line">    .then(回调1的回调---2)</span><br><span class="line">    .then(回调2的回调---3)</span><br></pre></td></tr></table></figure></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>( <span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// resolve成功</span></span><br><span class="line">    <span class="comment">// reject失败</span></span><br><span class="line">    $.ajax(&#123;</span><br><span class="line">        success(msg)&#123;</span><br><span class="line">            resolve(msg)</span><br><span class="line">        &#125;,</span><br><span class="line">        error(error)&#123;&#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).then( <span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// then的第一个参数为resolve(msg)成功的回调函数传的值</span></span><br><span class="line">    <span class="comment">// 一般接收成功用then</span></span><br><span class="line">    $.ajax(&#123;</span><br><span class="line">        success(msg)&#123;</span><br><span class="line">            resolve(msg)</span><br><span class="line">        &#125;,</span><br><span class="line">        error(error)&#123;&#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).catch( <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 一般接收失败用catch</span></span><br><span class="line">    <span class="built_in">console</span>.log(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="p-Promise-all-new-Promise-new-Promise-new-Promise"><a href="#p-Promise-all-new-Promise-new-Promise-new-Promise" class="headerlink" title="p = Promise.all([new Promise, new Promise, new Promise])"></a>p = Promise.all([new Promise, new Promise, new Promise])</h4><ul>
<li>所有成功即成功，返回所有成功参数的数组</li>
<li>有一个失败即失败，返回第一个失败的结果</li>
</ul>
<h4 id="p-Promise-race-p1-p2-p3"><a href="#p-Promise-race-p1-p2-p3" class="headerlink" title="p = Promise.race([p1, p2, p3])"></a>p = Promise.race([p1, p2, p3])</h4><ul>
<li>最先成功的函数的返回的状态就是他的状态</li>
</ul>
<h3 id="async函数"><a href="#async函数" class="headerlink" title="async函数"></a>async函数</h3><p>es2017提出</p>
<h2 id="DOM-document-object-model-文档对象模型"><a href="#DOM-document-object-model-文档对象模型" class="headerlink" title="DOM(document object model)文档对象模型"></a>DOM(document object model)文档对象模型</h2><blockquote>
<p>文档对象模型是表示和操作HTML、XML文档内容的基础API<br>当网页被加载时，浏览器会根据DOM模型将文档解析成一系列节点，构成了一个树状结构。</p>
</blockquote>
<p><img src="https://7n.w3cschool.cn/attachments/image/20170619/t_document.png" alt="image"></p>
<blockquote>
<p>图中每一个方框都是一个节点，表示一个node对象，所有的node构成了DOM Tree</p>
</blockquote>
<h3 id="节点有7个类型"><a href="#节点有7个类型" class="headerlink" title="节点有7个类型"></a>节点有7个类型</h3><ul>
<li><strong>Document：整个文档树的顶层节点</strong></li>
<li>DocumentType：比如<!DOCTYPE html></li>
<li><strong>Element：网页的各种HTML标签</strong></li>
<li>Attribute：网页元素的属性</li>
<li>Text：标签之间或标签包含的文本</li>
<li>Comment：注释</li>
<li>DocumentFragment：文档片段</li>
</ul>
<h3 id="通过CSS选择器选取元素"><a href="#通过CSS选择器选取元素" class="headerlink" title="通过CSS选择器选取元素"></a>通过CSS选择器选取元素</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.querySelectorAll(<span class="string">'.div'</span>);   <span class="comment">//选择所有class为div的元素</span></span><br><span class="line"><span class="built_in">document</span>.querySelectorAll(<span class="string">'[data-tip="title"]'</span>);    <span class="comment">//选择所有data-tip为title的元素</span></span><br><span class="line"><span class="built_in">document</span>.querySelectorAll(<span class="string">'div:not(.ignore)'</span>);  <span class="comment">//选择所有claa不为ignore的div元素</span></span><br></pre></td></tr></table></figure>

<ul>
<li>不支持伪元素的选择器，比如：first-line和first-letter；也不支持伪类的选择器，比如：link和：visited。</li>
</ul>
<h2 id="文档结构的遍历"><a href="#文档结构的遍历" class="headerlink" title="文档结构的遍历"></a>文档结构的遍历</h2><blockquote>
<p>Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。</p>
</blockquote>
<h3 id="Node属性："><a href="#Node属性：" class="headerlink" title="Node属性："></a>Node属性：</h3><ul>
<li>parentNode</li>
</ul>
<blockquote>
<p>作为<strong>元素树</strong>遍历，只遍历Element对象，不包含Text和Comment对象</p>
</blockquote>
<ul>
<li>children：返回NodeList对象，children列表只包含Element对象。（下同）</li>
<li>nextElementChild、lastElementChild</li>
<li>nextElementSibling、previousElementChild</li>
<li>childElementCount：返回子元素数量，同children.length</li>
<li>offsetParent：返回最靠近当前元素的父元素，且此父元素position不为static</li>
</ul>
<blockquote>
<p>作为<strong>节点树</strong>遍历，因此会有Text和Comment对象。@不推荐🤮</p>
</blockquote>
<ul>
<li>childNodes：返回只读类数组对象(NodeList对象)，包含Text和Comment。</li>
<li>firstChild、lastChild：分别返回第一个子节点、最后一个子节点，同样包含Text和Comment</li>
<li>nextSibling、previousSibling：分别返回下一个兄弟节点、前一个兄弟节点，包含Text和Comment</li>
<li>textContent：返回该节点和它所有后代节点的文本内容</li>
<li>nodeType：返回该节点类型代号-number</li>
<li>nodeName：返回该节点类型名称-string</li>
<li>nodeValue：返回Text和Comment的文本内容，其他类型的节点将返回null</li>
</ul>
<h3 id="NodeList和HTMLCollection"><a href="#NodeList和HTMLCollection" class="headerlink" title="NodeList和HTMLCollection"></a>NodeList和HTMLCollection</h3><ul>
<li>NodeList实例对象可能是动态集合也可能是静态集合。DOM Tree 每新增或删除一个节点，都可以反映在NodeList接口中。NodeList实例对象提供length属性和数字索引，但不能使用pop（）、push（）之类数组特有的方法。</li>
<li>HTMLCollection实例对象同NodeList实例对象，也是节点的集合，返回类数组对象。</li>
<li>HTMLDocument类中，有一些属性可以快捷访问节点。比如images、forms、links属性指向类数组&lt;img&gt;、&lt;form&gt;、&lt;a&gt;元素集合，返回的都是HTMLCollection实例对象。</li>
</ul>
<p><img src="/uploads/images/lean/js/1.jpg" alt="HTMLDocument"></p>
<ul>
<li><strong>注: HTMLDocument是类名，调用的是类的实例如document</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.forms.length   <span class="comment">//返回document文档里&lt;form&gt;个数</span></span><br><span class="line"><span class="built_in">document</span>.doby   <span class="comment">//返回&lt;body&gt;</span></span><br><span class="line"><span class="built_in">document</span>.head   <span class="comment">//返回&lt;html&gt;</span></span><br><span class="line"><span class="built_in">document</span>.documentElement    <span class="comment">//返回&lt;html&gt;</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th></th>
<th>HTMLDocument</th>
<th>NodeList</th>
</tr>
</thead>
<tbody><tr>
<td>节点类型</td>
<td>Element</td>
<td>Element、Text、Comment</td>
</tr>
<tr>
<td>实例对象</td>
<td>只能是动态集合</td>
<td>可动态可静态</td>
</tr>
<tr>
<td>索引方式</td>
<td>可数字还可class、id</td>
<td>只能数字索引</td>
</tr>
</tbody></table>
<h2 id="文档的内容"><a href="#文档的内容" class="headerlink" title="文档的内容"></a>文档的内容</h2><ul>
<li>innerHTML：返回当前元素包含的Element+Text，可读可写</li>
<li>outerHTML:返回当前元素及当前元素包含的Element+Text，可读可写</li>
<li>textContext：返回当前元素中所有后代节点的所有纯文本，可读可写。若写的内容包含Element，如&lt;.span&gt;，文档节点不会改动，因为此时&lt;.span&gt;被当作纯文本处理而不是标签。 </li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">"div"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>123<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="keyword">var</span> d = <span class="built_in">document</span>.getElementById(<span class="string">'div'</span>);</span><br><span class="line">d.innerHTML  <span class="comment">// "&lt;p&gt;123&lt;/p&gt;"</span></span><br><span class="line">d.outerHTML <span class="comment">// "&lt;div id="div"&gt;&lt;p&gt;123&lt;/p&gt;&lt;/div&gt;"</span></span><br><span class="line"><span class="comment">/*写innerHTML*/</span></span><br><span class="line">d.innerHTML = <span class="string">'&lt;span&gt;99&lt;/span&gt;'</span></span><br><span class="line"><span class="comment">// &lt;div id="div"&gt;&lt;span&gt;99&lt;/span&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="comment">//标签被换了</span></span><br></pre></td></tr></table></figure>

<ul>
<li>insertAdjacentHTML(beforebegin|afterbegin|beforeend|afterend,’tag’)<ul>
<li>此方法可将HTML标记符插入到指定元素的指定位置，第一个参数为插入的位置，第二个参数为要插入的标签名称</li>
</ul>
</li>
</ul>
<p><img src="https://7n.w3cschool.cn/attachments/image/20170619/t_insertAdjacentHTML.png" alt="image"></p>
<ul>
<li>document.createElement(‘tag’)：创建一个标签</li>
<li>document.createTextNode(‘these are some text ~’)：创建文本节点</li>
<li>createAttribute(‘attribute’,’value’);   为一个标签创建属性</li>
<li>cloneNode(‘tag’,true|false); 复制一个标签，第二个参数可选，默认false（不复制子标签）</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>appendChild(new)</th>
<th>insertBefore(new,old)</th>
</tr>
</thead>
<tbody><tr>
<td>相同点</td>
<td>都是在子元素列表中插入元素</td>
<td></td>
</tr>
<tr>
<td>不同点</td>
<td>在子元素列表的最后插入</td>
<td>在old元素前面插入new</td>
</tr>
<tr>
<td><strong>注：如果要插入的节点是已存在与文档中，那么将从原来的位置移除插到指定位置。</strong></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<ul>
<li>parentNode.removeChild(childnode)：父元素调用此方法删除一个子元素</li>
<li>parentNode.replaceChild(newNode,oldNode)：父元素调用此方法，替换掉一个不需要的子元素。</li>
</ul>
<blockquote>
<p>DocumentFragment是一种特殊的Node，它作为其他节点的一个临时的容器。DocumentFragment是独立的，而不是任何其他文档的一部分。它的parentNode总是为null。但类似Element，它可以有任意多的子节点，也可以使用appendChild()等方法。</p>
</blockquote>
<ul>
<li>DocumentFragment的特殊之处在于它使得一组节点被当做一个节点看待。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> frag = docment.createDocumentFragment();</span><br></pre></td></tr></table></figure>

<h2 id="坐标、尺寸"><a href="#坐标、尺寸" class="headerlink" title="坐标、尺寸"></a>坐标、尺寸</h2><ul>
<li>getBoundingClienRect()：返回一个rectangle对象，此对象有width、height、left、right、top、bottom</li>
<li>由于元素的默认position为static，是相对于viewport的（视口：实际显示DOM文档的部分——不包括浏览器的标签栏、搜索栏等），因此会随着页面滚动变化。实现位置固定的一种方法：left+window.scollX, top+window.scollY</li>
<li>elementFromPoint(X,Y)：返回在指定位置的一个元素</li>
<li>Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数</li>
<li>Element.scoollTop属性表示网页元素的垂直滚动条向下滚动的像素数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//查看整张网页的水平的和垂直的滚动距离</span></span><br><span class="line"><span class="built_in">document</span>.body.scrollLeft </span><br><span class="line"><span class="built_in">document</span>.body.scrollTop</span><br><span class="line"><span class="comment">//这两个属性都可读可写</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>还可以用scrollBy(X, Y )控制网页的滚动<br>所有元素都有clientWidth、clientHeight属性，值为width+padding，不包含border、margin、滚动条</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//没有垂直滚动条时 </span></span><br><span class="line"><span class="built_in">document</span>.documentElement.clientHeight === <span class="built_in">window</span>.innerHeight <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>对于&lt;.i&gt;、&lt;.code&gt;和&lt;.span&gt;这些内联元素，clientWidth和clientHeight总是0</p>
</blockquote>
<ul>
<li><p>scollWidth、scollHeight属性，值也是width+padding，但包括溢出内容的width</p>
</li>
<li><p>offsetWidth为clientWidth+border</p>
</li>
</ul>
<h3 id="Document属性"><a href="#Document属性" class="headerlink" title="Document属性"></a>Document属性</h3><ul>
<li>domain    当前文档的域名</li>
<li>lastModified  文档修改时间的字符串</li>
<li>location  与window对象的located属性引用同一个location对象</li>
<li>referree  返回一个字符串，表示访问本文档的来源。如果无法获取来源或用户直接键入网址，则返回空字符串</li>
<li>title title节点之间的内容可读写</li>
<li>doctype   document两个子节点的第一个子节点<!DOCTYPE html></li>
<li>documentElement   document两个子节点的第二个子节点&lt;.html&gt;</li>
<li>defaultview   返回window对象</li>
<li>activeElement 返回文档中当前获得焦点的那个元素</li>
<li>characterset  返回渲染当前文档的字符集</li>
<li>readyState    返回当前文档状态1loading加载HTML2interactive加载外部资源3complete加载完成</li>
</ul>
<h3 id="Document方法"><a href="#Document方法" class="headerlink" title="Document方法"></a>Document方法</h3><ul>
<li>write()   writerIn()<ul>
<li>可为标签设置contenteditable属性为true使其可被编辑</li>
</ul>
</li>
</ul>
<h3 id="execCommand（aCommandName-aShowDefaultUI-aValueArgument）"><a href="#execCommand（aCommandName-aShowDefaultUI-aValueArgument）" class="headerlink" title="execCommand（aCommandName, aShowDefaultUI, aValueArgument）"></a>execCommand（aCommandName, aShowDefaultUI, aValueArgument）</h3><ul>
<li>功能：插入元素、改变样式</li>
</ul>
<h3 id="HTML属性"><a href="#HTML属性" class="headerlink" title="HTML属性"></a>HTML属性</h3><ul>
<li>getAttribute(‘attr’)  返回属性值</li>
<li>seAttribute(‘attr’, ‘value’) 为元素新增/修改属性</li>
<li>hasAttribute(‘attr’)  判断某元素是否有某属性，返回布尔值</li>
<li>removeAttribute(‘attr’)   为元素移除属性</li>
</ul>
<h3 id="数据集（dataset）属性"><a href="#数据集（dataset）属性" class="headerlink" title="数据集（dataset）属性"></a>数据集（dataset）属性</h3><ul>
<li>在HTML5文档中，任意以’data-‘为前缀的小写属性都是合法的</li>
<li>Element有一个dataset属性，Element.dataset对应一个对象，这个对象的属性对应于’data-‘后面的部分，如果有多个-则用驼峰命名。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"top"</span> <span class="attr">data-tip</span>=<span class="string">"title"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> t=<span class="built_in">document</span>.getElementById(<span class="string">'top'</span>);</span></span><br><span class="line"><span class="javascript">t.dataset.tip  <span class="comment">//title</span></span></span><br><span class="line"><span class="javascript">t.dataset.tip = <span class="string">'title2'</span><span class="comment">//该属性是实时双向的，任何改变都会影响标签原属性</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="attribute属性是只读类数组对象，索引方式有多种"><a href="#attribute属性是只读类数组对象，索引方式有多种" class="headerlink" title="attribute属性是只读类数组对象，索引方式有多种"></a>attribute属性是只读类数组对象，索引方式有多种</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.body.attributes[<span class="number">0</span>]  <span class="comment">//&lt;body&gt;元素的第一个属性</span></span><br><span class="line"><span class="built_in">document</span>.body.attributes.bgcolor <span class="comment">// &lt;body&gt;元素的bgcolor属性</span></span><br><span class="line"><span class="built_in">document</span>.body.attributes[<span class="string">'ONLOAD'</span>]  <span class="comment">// &lt;body&gt;元素的onload属性。</span></span><br><span class="line"><span class="comment">//同时，属性节点又有name(nodeName)和value（nodeValue）的属性</span></span><br><span class="line"><span class="keyword">var</span> t = <span class="built_in">document</span>.getElemntById(<span class="string">'top'</span>);</span><br><span class="line">t.attributes[<span class="number">0</span>].name  <span class="comment">// "id"</span></span><br><span class="line">t.attributes[<span class="number">0</span>].nodeName <span class="comment">// "id"</span></span><br><span class="line">t.attributes[<span class="number">0</span>].value  <span class="comment">// "top"</span></span><br><span class="line">t.attributes[<span class="number">0</span>].nodeValue <span class="comment">// "top"</span></span><br></pre></td></tr></table></figure>

<h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2><ul>
<li>Element.style返回的值是一个CSSStyleDeclaration</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> t = <span class="built_in">document</span>.getElementById(<span class="string">'top'</span>);</span><br><span class="line">t.style.color = <span class="string">'red'</span>;</span><br><span class="line"><span class="comment">//或</span></span><br><span class="line">t.setAttribute(<span class="string">'style'</span>,<span class="string">'background:red;'</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li>style对象的cssText也可以用来读写或删除整个style属性。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">t.style.cssText = <span class="string">'background:red'</span>;</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>写法注意</strong> <ul>
<li>float在JS中是关键字，因此要写  style.cssFloat</li>
<li>border-left-width要写 borderLeftWidth</li>
<li>三个方法的第一个参数，都是CSS属性名，且不用改写连词线。</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">t.style.setProperty(<span class="string">'background-color'</span>,<span class="string">'red'</span>);</span><br><span class="line">t.style.getPropertyValue(<span class="string">'background-color'</span>);</span><br><span class="line">t.style.removeProperty(<span class="string">'background-color'</span>);</span><br></pre></td></tr></table></figure>

<h3 id="window-getComputedStyle"><a href="#window-getComputedStyle" class="headerlink" title="window.getComputedStyle()"></a>window.getComputedStyle()</h3><ul>
<li>可以用来获取CSS伪对象伪元素的样式，第一个参数是元素，第二个参数通常为null或空字符串，但也可以是 :before :after :first-line first-letter</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-id">#top</span>&#123; <span class="attribute">line-height</span>:<span class="number">30px</span>;&#125;</span></span><br><span class="line"><span class="css">  <span class="selector-id">#top</span><span class="selector-pseudo">:before</span>&#123;<span class="attribute">content</span>:<span class="string">'before'</span>;<span class="attribute">color</span>:red&#125;;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"top"</span> <span class="attr">style</span>=<span class="string">"background:red"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> t = <span class="built_in">document</span>.getElementById(<span class="string">'top'</span>);</span></span><br><span class="line"><span class="javascript"><span class="built_in">window</span>.getComputedStyle(t,<span class="literal">null</span>).lineHeight  <span class="comment">//30px 去掉连字符</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">window</span>.getComputedStyle(t,<span class="literal">null</span>).getPropertyValue(<span class="string">'line-height'</span>);  <span class="comment">//30px，无需去掉连字符</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">window</span>.getComputedStyle(t,<span class="string">':before'</span>).content  <span class="comment">// "before"</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>


      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/weixin.jpg" alt="shellingford ly 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/zhifubao.jpg" alt="shellingford ly 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/js/" rel="tag"># js</a>
          
        </div>
      

      
      
        <div class="post-widgets">
        

        

        
          
          <div id="needsharebutton-postbottom">
            <span class="btn">
              <i class="fa fa-share-alt" aria-hidden="true"></i>
            </span>
          </div>
        
        </div>
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/09/29/hexo使用文档/" rel="next" title="hexo使用文档">
                <i class="fa fa-chevron-left"></i> hexo使用文档
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/09/29/vue学习笔记/" rel="prev" title="Vue学习笔记">
                Vue学习笔记 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/uploads/images/header.jpg" alt="shellingford ly">
            
              <p class="site-author-name" itemprop="name">shellingford ly</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                
                  <span class="site-state-item-count">15</span>
                  <span class="site-state-item-name">分类</span>
                
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                
                  <span class="site-state-item-count">18</span>
                  <span class="site-state-item-name">标签</span>
                
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/shellingfordly" target="_blank" title="github">
                      
                        <i class="fa fa-fw fa-github"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://gitee.com/shellingfordly" target="_blank" title="码云">
                      
                        <i class="fa fa-fw fa-maxcdn"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/shellingfordly" target="_blank" title="微博">
                      
                        <i class="fa fa-fw fa-weibo"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.cnblogs.com/shellingfordly" target="_blank" title="博客园">
                      
                        <i class="fa fa-fw fa-rss"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:shellingfordly@qq.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://space.bilibili.com/288333302" target="_blank" title="bilibili">
                      
                        <i class="fa fa-fw fa-globe"></i></a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#变量的声明"><span class="nav-number">1.</span> <span class="nav-text">变量的声明</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#var"><span class="nav-number">1.1.</span> <span class="nav-text">var</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#function"><span class="nav-number">1.2.</span> <span class="nav-text">function</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#有名函数"><span class="nav-number">1.2.1.</span> <span class="nav-text">有名函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#匿名函数"><span class="nav-number">1.2.2.</span> <span class="nav-text">匿名函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#函数的声明"><span class="nav-number">1.2.3.</span> <span class="nav-text">函数的声明</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数执行方式"><span class="nav-number">1.3.</span> <span class="nav-text">函数执行方式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#函数自执行"><span class="nav-number">1.3.1.</span> <span class="nav-text">函数自执行</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#被动执行"><span class="nav-number">1.3.2.</span> <span class="nav-text">被动执行</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数传参"><span class="nav-number">1.4.</span> <span class="nav-text">函数传参</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#对应传参"><span class="nav-number">1.4.1.</span> <span class="nav-text">对应传参</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#任意传参"><span class="nav-number">1.4.2.</span> <span class="nav-text">任意传参</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#return"><span class="nav-number">1.4.3.</span> <span class="nav-text">return</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作用域"><span class="nav-number">1.5.</span> <span class="nav-text">作用域</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#全局域"><span class="nav-number">1.5.1.</span> <span class="nav-text">全局域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#局部域"><span class="nav-number">1.5.2.</span> <span class="nav-text">局部域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#作用域链"><span class="nav-number">1.5.3.</span> <span class="nav-text">作用域链</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#continue-break"><span class="nav-number">1.6.</span> <span class="nav-text">continue / break</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#元素"><span class="nav-number">2.</span> <span class="nav-text">元素</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#对属性的操作"><span class="nav-number">2.1.</span> <span class="nav-text">对属性的操作</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#getComputedStyle"><span class="nav-number">2.1.1.</span> <span class="nav-text">getComputedStyle();</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#obj-currentStyle"><span class="nav-number">2.1.2.</span> <span class="nav-text">obj.currentStyle;</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#代码解析"><span class="nav-number">2.2.</span> <span class="nav-text">代码解析</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#预解析"><span class="nav-number">2.2.1.</span> <span class="nav-text">预解析</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#解析"><span class="nav-number">2.2.2.</span> <span class="nav-text">解析</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#编译"><span class="nav-number">2.2.3.</span> <span class="nav-text">编译</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#闭包"><span class="nav-number">2.3.</span> <span class="nav-text">闭包</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#定时器"><span class="nav-number">2.4.</span> <span class="nav-text">定时器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#回调函数"><span class="nav-number">2.4.1.</span> <span class="nav-text">回调函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#setTimeout"><span class="nav-number">2.4.2.</span> <span class="nav-text">setTimeout();</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#setTnterval"><span class="nav-number">2.4.3.</span> <span class="nav-text">setTnterval();</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#清除定时器"><span class="nav-number">2.4.4.</span> <span class="nav-text">清除定时器</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#获取样式"><span class="nav-number">2.5.</span> <span class="nav-text">获取样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#封装"><span class="nav-number">2.6.</span> <span class="nav-text">封装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#添加-移除属性"><span class="nav-number">2.7.</span> <span class="nav-text">添加/移除属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数据"><span class="nav-number">3.</span> <span class="nav-text">数据</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#数据类型"><span class="nav-number">3.1.</span> <span class="nav-text">数据类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#引用型数据类型"><span class="nav-number">3.1.1.</span> <span class="nav-text">引用型数据类型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#基本数据类型"><span class="nav-number">3.1.2.</span> <span class="nav-text">基本数据类型</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#字符串"><span class="nav-number">3.2.</span> <span class="nav-text">字符串</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#字符串定义"><span class="nav-number">3.2.1.</span> <span class="nav-text">字符串定义</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#查找字符串"><span class="nav-number">3.2.2.</span> <span class="nav-text">查找字符串</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#截取字符串"><span class="nav-number">3.2.3.</span> <span class="nav-text">截取字符串</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#转换（不常用）"><span class="nav-number">3.2.4.</span> <span class="nav-text">转换（不常用）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#查找"><span class="nav-number">3.2.5.</span> <span class="nav-text">查找</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#替换"><span class="nav-number">3.2.6.</span> <span class="nav-text">替换</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#分割"><span class="nav-number">3.2.7.</span> <span class="nav-text">分割</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组"><span class="nav-number">3.3.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#创建"><span class="nav-number">3.3.1.</span> <span class="nav-text">创建</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#方法"><span class="nav-number">3.3.2.</span> <span class="nav-text">方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#类数组"><span class="nav-number">3.3.3.</span> <span class="nav-text">类数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#冒泡排序"><span class="nav-number">3.3.4.</span> <span class="nav-text">冒泡排序</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#json"><span class="nav-number">3.4.</span> <span class="nav-text">json</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#方法-1"><span class="nav-number">3.4.1.</span> <span class="nav-text">方法</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#转换"><span class="nav-number">3.5.</span> <span class="nav-text">转换</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Number"><span class="nav-number">3.5.1.</span> <span class="nav-text">Number()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#parseInt"><span class="nav-number">3.5.2.</span> <span class="nav-text">parseInt()</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Math函数"><span class="nav-number">3.6.</span> <span class="nav-text">Math函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#判断数据类型"><span class="nav-number">3.7.</span> <span class="nav-text">判断数据类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#三目运算"><span class="nav-number">3.7.1.</span> <span class="nav-text">三目运算</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#switch语句"><span class="nav-number">3.7.2.</span> <span class="nav-text">switch语句</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#自增自减"><span class="nav-number">3.7.3.</span> <span class="nav-text">自增自减</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#循环"><span class="nav-number">3.7.4.</span> <span class="nav-text">循环</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组-1"><span class="nav-number">3.8.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#创建数组"><span class="nav-number">3.8.1.</span> <span class="nav-text">创建数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#修改数组"><span class="nav-number">3.8.2.</span> <span class="nav-text">修改数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#稀疏数组"><span class="nav-number">3.8.3.</span> <span class="nav-text">稀疏数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#方法-2"><span class="nav-number">3.8.4.</span> <span class="nav-text">方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#排序"><span class="nav-number">3.8.5.</span> <span class="nav-text">排序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#别的操作"><span class="nav-number">3.8.6.</span> <span class="nav-text">别的操作</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ECMAscript5"><span class="nav-number">3.9.</span> <span class="nav-text">ECMAscript5</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#参数"><span class="nav-number">3.9.1.</span> <span class="nav-text">参数</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#节点"><span class="nav-number">4.</span> <span class="nav-text">节点</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#获取节点"><span class="nav-number">4.1.</span> <span class="nav-text">获取节点</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#obj-children-获取所有的子元素节点"><span class="nav-number">4.1.1.</span> <span class="nav-text">obj.children 获取所有的子元素节点</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#15、obj-parentNode-获取父节点，没有兼容性问题"><span class="nav-number">4.1.2.</span> <span class="nav-text">15、obj.parentNode 获取父节点，没有兼容性问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#常用方法"><span class="nav-number">4.1.3.</span> <span class="nav-text">常用方法:</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建一个元素节点"><span class="nav-number">4.1.4.</span> <span class="nav-text">创建一个元素节点</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#克隆节点"><span class="nav-number">4.1.5.</span> <span class="nav-text">克隆节点</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css试图模式"><span class="nav-number">5.</span> <span class="nav-text">css试图模式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#client"><span class="nav-number">5.1.</span> <span class="nav-text">client</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#inner"><span class="nav-number">5.2.</span> <span class="nav-text">inner</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#offset-与定位有关"><span class="nav-number">5.3.</span> <span class="nav-text">offset 与定位有关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#scroll"><span class="nav-number">5.4.</span> <span class="nav-text">scroll</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#page"><span class="nav-number">5.5.</span> <span class="nav-text">page</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件对象"><span class="nav-number">6.</span> <span class="nav-text">事件对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#事件代理"><span class="nav-number">6.1.</span> <span class="nav-text">事件代理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM零级事件"><span class="nav-number">6.2.</span> <span class="nav-text">DOM零级事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#阻止默认行为"><span class="nav-number">6.3.</span> <span class="nav-text">阻止默认行为</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#oncontextmenu"><span class="nav-number">6.3.1.</span> <span class="nav-text">oncontextmenu</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#onmousedown"><span class="nav-number">6.3.2.</span> <span class="nav-text">onmousedown</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#鼠标滚动事件"><span class="nav-number">6.4.</span> <span class="nav-text">鼠标滚动事件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#document-onscroll"><span class="nav-number">6.4.1.</span> <span class="nav-text">document.onscroll</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#document-onmousewheel"><span class="nav-number">6.4.2.</span> <span class="nav-text">document.onmousewheel</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#鼠标滚轮事件兼容"><span class="nav-number">6.5.</span> <span class="nav-text">鼠标滚轮事件兼容</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#BOM"><span class="nav-number">7.</span> <span class="nav-text">BOM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表单事件"><span class="nav-number">8.</span> <span class="nav-text">表单事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#键盘事件"><span class="nav-number">9.</span> <span class="nav-text">键盘事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#正则表达式"><span class="nav-number">10.</span> <span class="nav-text">正则表达式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#text-str-正则的方法"><span class="nav-number">10.1.</span> <span class="nav-text">text(str) 正则的方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#元字符"><span class="nav-number">10.2.</span> <span class="nav-text">元字符</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#量词"><span class="nav-number">10.2.1.</span> <span class="nav-text">量词</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#修饰符-标识符"><span class="nav-number">10.2.2.</span> <span class="nav-text">修饰符/标识符</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#存储-缓存数据"><span class="nav-number">11.</span> <span class="nav-text">存储/缓存数据</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#cookie"><span class="nav-number">11.1.</span> <span class="nav-text">cookie</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#localStorage和sessionStorage"><span class="nav-number">11.2.</span> <span class="nav-text">localStorage和sessionStorage</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字符串模板"><span class="nav-number">12.</span> <span class="nav-text">字符串模板</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax"><span class="nav-number">13.</span> <span class="nav-text">ajax</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#get和post的区别"><span class="nav-number">13.1.</span> <span class="nav-text">get和post的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#get"><span class="nav-number">13.1.1.</span> <span class="nav-text">get</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#post"><span class="nav-number">13.1.2.</span> <span class="nav-text">post</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jsonp"><span class="nav-number">14.</span> <span class="nav-text">jsonp</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#callback"><span class="nav-number">14.1.</span> <span class="nav-text">callback</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#面向对象"><span class="nav-number">15.</span> <span class="nav-text">面向对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#面向对象三大特征："><span class="nav-number">15.1.</span> <span class="nav-text">面向对象三大特征：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#new"><span class="nav-number">15.2.</span> <span class="nav-text">new</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#原型prototype"><span class="nav-number">15.3.</span> <span class="nav-text">原型prototype</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#原型链"><span class="nav-number">15.4.</span> <span class="nav-text">原型链</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#多态"><span class="nav-number">16.</span> <span class="nav-text">多态</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es6新增"><span class="nav-number">17.</span> <span class="nav-text">es6新增</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#let-const-class-import"><span class="nav-number">17.1.</span> <span class="nav-text">let const class import</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#const-声明常量"><span class="nav-number">17.2.</span> <span class="nav-text">const 声明常量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解构赋值"><span class="nav-number">17.3.</span> <span class="nav-text">解构赋值</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#扩展运算符-“…”"><span class="nav-number">17.3.1.</span> <span class="nav-text">扩展运算符 “…”</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#includes"><span class="nav-number">17.4.</span> <span class="nav-text">includes()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#starrsWith"><span class="nav-number">17.5.</span> <span class="nav-text">starrsWith()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#endsWith"><span class="nav-number">17.6.</span> <span class="nav-text">endsWith()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#repeat-n"><span class="nav-number">17.7.</span> <span class="nav-text">repeat(n)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#padStart-n-str-padEnd-n-str"><span class="nav-number">18.</span> <span class="nav-text">padStart(n,str) padEnd(n,str)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#padStart"><span class="nav-number">18.1.</span> <span class="nav-text">padStart()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#padEnd"><span class="nav-number">18.2.</span> <span class="nav-text">padEnd()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es6"><span class="nav-number">19.</span> <span class="nav-text">es6</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Number-isInteger-判断整数"><span class="nav-number">19.0.1.</span> <span class="nav-text">Number.isInteger() 判断整数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Math函数-1"><span class="nav-number">19.1.</span> <span class="nav-text">Math函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Math-trunc"><span class="nav-number">19.1.1.</span> <span class="nav-text">Math.trunc()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Math-sign"><span class="nav-number">19.1.2.</span> <span class="nav-text">Math.sign()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Math-cbrt-计算一个立方根"><span class="nav-number">19.1.3.</span> <span class="nav-text">Math.cbrt() 计算一个立方根</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Math-hypot-勾股定理，求第三边"><span class="nav-number">19.1.4.</span> <span class="nav-text">Math.hypot() 勾股定理，求第三边</span></a></li></ol></li></ol><li class="nav-item nav-level-2"><a class="nav-link" href="#函数的扩展"><span class="nav-number">20.</span> <span class="nav-text">函数的扩展</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#临时作用域"><span class="nav-number">20.1.</span> <span class="nav-text">临时作用域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#rest参数-…参数名"><span class="nav-number">20.2.</span> <span class="nav-text">rest参数 …参数名</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#箭头函数-gt"><span class="nav-number">20.3.</span> <span class="nav-text">箭头函数 () =&gt; {}</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数组的扩展"><span class="nav-number">21.</span> <span class="nav-text">数组的扩展</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#拷贝数组"><span class="nav-number">21.1.</span> <span class="nav-text">拷贝数组</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#arr-concat"><span class="nav-number">21.1.1.</span> <span class="nav-text">arr.concat();</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#…arr"><span class="nav-number">21.1.2.</span> <span class="nav-text">…arr</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#浅拷贝"><span class="nav-number">21.1.3.</span> <span class="nav-text">浅拷贝</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-assgin-合并对象"><span class="nav-number">21.2.</span> <span class="nav-text">Object.assgin() 合并对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-keys-键名"><span class="nav-number">21.3.</span> <span class="nav-text">Object.keys() 键名</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-values-键值"><span class="nav-number">21.4.</span> <span class="nav-text">Object.values() 键值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-entries-键值对"><span class="nav-number">21.5.</span> <span class="nav-text">Object.entries() 键值对</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#判断一个对象是否是数组"><span class="nav-number">22.</span> <span class="nav-text">判断一个对象是否是数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Array-isArray-obj"><span class="nav-number">22.1.</span> <span class="nav-text">Array.isArray(obj)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#obj-instanceof-Array"><span class="nav-number">22.2.</span> <span class="nav-text">obj instanceof Array</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#判断是否有length-join-constructor-Array"><span class="nav-number">22.3.</span> <span class="nav-text">判断是否有length/join/constructor === Array</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jq操作"><span class="nav-number">23.</span> <span class="nav-text">jq操作</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#offset"><span class="nav-number">23.1.</span> <span class="nav-text">$().offset()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-offset-top-num-left-num"><span class="nav-number">23.2.</span> <span class="nav-text">1.$().offset({top: num,left: num})</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#position"><span class="nav-number">23.3.</span> <span class="nav-text">$().position()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#srollTop"><span class="nav-number">23.4.</span> <span class="nav-text">$().srollTop()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-srollTop-num"><span class="nav-number">23.5.</span> <span class="nav-text">3.$().srollTop(num)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4、获取宽度"><span class="nav-number">23.6.</span> <span class="nav-text">4、获取宽度</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#lt-1-gt-width"><span class="nav-number">23.6.1.</span> <span class="nav-text">&lt;1&gt; $().width()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#lt-2-gt-innerWidth"><span class="nav-number">23.6.2.</span> <span class="nav-text">&lt;2&gt; $().innerWidth()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#lt-3-gt-outerWidth"><span class="nav-number">23.6.3.</span> <span class="nav-text">&lt;3&gt; $().outerWidth()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#lt-4-gt-传值的时候"><span class="nav-number">23.6.4.</span> <span class="nav-text">&lt;4&gt; 传值的时候</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#map-function-index-val"><span class="nav-number">23.7.</span> <span class="nav-text">$().map(function(index,val){})</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#each-function-index-val"><span class="nav-number">23.8.</span> <span class="nav-text">$().each(function(index,val){})</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#获取地理位置"><span class="nav-number">24.</span> <span class="nav-text">获取地理位置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#console的方法"><span class="nav-number">25.</span> <span class="nav-text">console的方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax-1"><span class="nav-number">26.</span> <span class="nav-text">ajax</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#get接收"><span class="nav-number">26.1.</span> <span class="nav-text">get接收</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#post发送"><span class="nav-number">26.2.</span> <span class="nav-text">post发送</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#jq封装的方法"><span class="nav-number">26.3.</span> <span class="nav-text">jq封装的方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨域"><span class="nav-number">27.</span> <span class="nav-text">跨域</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jsonp-1"><span class="nav-number">28.</span> <span class="nav-text">jsonp</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#类库-工具api的集合"><span class="nav-number">29.</span> <span class="nav-text">类库(工具api的集合)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#框架"><span class="nav-number">30.</span> <span class="nav-text">框架</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#jQuery"><span class="nav-number">30.1.</span> <span class="nav-text">jQuery</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#each-i-v-s-gt"><span class="nav-number">30.2.</span> <span class="nav-text">$().each( (i, v, s) =&gt; {} )</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#length"><span class="nav-number">30.3.</span> <span class="nav-text">$().length</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx”-context"><span class="nav-number">30.4.</span> <span class="nav-text">$(“xxx”, context)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#get-index"><span class="nav-number">30.5.</span> <span class="nav-text">$().get(index)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#index"><span class="nav-number">30.6.</span> <span class="nav-text">$().index()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#data"><span class="nav-number">30.7.</span> <span class="nav-text">$().data()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jq选择器"><span class="nav-number">31.</span> <span class="nav-text">jq选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-first”"><span class="nav-number">31.1.</span> <span class="nav-text">$(“xxx:first”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-last”"><span class="nav-number">31.2.</span> <span class="nav-text">$(“xxx:last”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-not-XXX-”"><span class="nav-number">31.3.</span> <span class="nav-text">$(“xxx:not(XXX)”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-even”"><span class="nav-number">31.4.</span> <span class="nav-text">$(“xxx:even”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-odd”"><span class="nav-number">31.5.</span> <span class="nav-text">$(“xxx:odd”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-eq-index-”"><span class="nav-number">31.6.</span> <span class="nav-text">$(“xxx:eq(index)”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-gt-index-”"><span class="nav-number">31.7.</span> <span class="nav-text">$(“xxx:gt(index)”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-lt-index-”"><span class="nav-number">31.8.</span> <span class="nav-text">$(“xxx:lt(index)”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-contains-text-”"><span class="nav-number">31.9.</span> <span class="nav-text">$(“xxx:contains(text)”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-animated”"><span class="nav-number">31.10.</span> <span class="nav-text">$(“xxx:animated”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“-empty”"><span class="nav-number">31.11.</span> <span class="nav-text">$(“:empty”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-parent”"><span class="nav-number">31.12.</span> <span class="nav-text">$(“xxx:parent”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-has-XXX-”"><span class="nav-number">31.13.</span> <span class="nav-text">$(“xxx:has(XXX)”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-hidden”"><span class="nav-number">31.14.</span> <span class="nav-text">$(“xxx:hidden”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-visible”"><span class="nav-number">31.15.</span> <span class="nav-text">$(“xxx:visible”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-attribute-”"><span class="nav-number">31.16.</span> <span class="nav-text">$(“xxx[attribute]”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“xxx-checked”"><span class="nav-number">31.17.</span> <span class="nav-text">$(“xxx:checked”)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jq属性api"><span class="nav-number">32.</span> <span class="nav-text">jq属性api</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#attr"><span class="nav-number">32.1.</span> <span class="nav-text">attr</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#prop"><span class="nav-number">32.2.</span> <span class="nav-text">prop</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#removeAttr"><span class="nav-number">32.3.</span> <span class="nav-text">removeAttr</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#removeProp"><span class="nav-number">32.4.</span> <span class="nav-text">removeProp</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#addClass"><span class="nav-number">32.5.</span> <span class="nav-text">addClass()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#removerClass"><span class="nav-number">32.6.</span> <span class="nav-text">removerClass()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hasClass"><span class="nav-number">32.7.</span> <span class="nav-text">hasClass()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toggleClass"><span class="nav-number">32.8.</span> <span class="nav-text">toggleClass()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html"><span class="nav-number">32.9.</span> <span class="nav-text">html()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#text"><span class="nav-number">32.10.</span> <span class="nav-text">text()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#val"><span class="nav-number">32.11.</span> <span class="nav-text">val()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jqCSSapi"><span class="nav-number">33.</span> <span class="nav-text">jqCSSapi</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#css"><span class="nav-number">33.1.</span> <span class="nav-text">css()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#offset-1"><span class="nav-number">33.2.</span> <span class="nav-text">offset()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#offset-top-num-left-num"><span class="nav-number">33.3.</span> <span class="nav-text">$().offset({top: num,left: num})</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#position-1"><span class="nav-number">33.4.</span> <span class="nav-text">$().position()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#srollTop-1"><span class="nav-number">33.5.</span> <span class="nav-text">$().srollTop()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#srollTop-num"><span class="nav-number">33.6.</span> <span class="nav-text">$().srollTop(num)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#srollLeft"><span class="nav-number">33.7.</span> <span class="nav-text">$().srollLeft()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#srollLeft-num"><span class="nav-number">33.8.</span> <span class="nav-text">$().srollLeft(num)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#height"><span class="nav-number">33.9.</span> <span class="nav-text">$().height()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#width"><span class="nav-number">33.10.</span> <span class="nav-text">$().width()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#innerHeight"><span class="nav-number">33.11.</span> <span class="nav-text">$().innerHeight()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#innerWidth"><span class="nav-number">33.12.</span> <span class="nav-text">$().innerWidth()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#outerHeight"><span class="nav-number">33.13.</span> <span class="nav-text">$().outerHeight()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#outerWidth"><span class="nav-number">33.14.</span> <span class="nav-text">$().outerWidth()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jq文档处理"><span class="nav-number">34.</span> <span class="nav-text">jq文档处理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#“div”-append-““"><span class="nav-number">34.1.</span> <span class="nav-text">$(“div”).append(““)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“div”-prepend-““"><span class="nav-number">34.2.</span> <span class="nav-text">$(“div”).prepend(““)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“p”-appendTo-“div”"><span class="nav-number">34.3.</span> <span class="nav-text">$(“p”).appendTo(“div”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“div”-after-““"><span class="nav-number">34.4.</span> <span class="nav-text">$(“div”).after(““)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#““-insertAfter-“div”"><span class="nav-number">34.5.</span> <span class="nav-text">$(““).insertAfter(“div”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“div”-before-““"><span class="nav-number">34.6.</span> <span class="nav-text">$(“div”).before(““)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#““-insertBefore-“div”"><span class="nav-number">34.7.</span> <span class="nav-text">$(““).insertBefore(“div”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“p”-wrap-““"><span class="nav-number">34.8.</span> <span class="nav-text">$(“p”).wrap(““)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“p”-unwrap"><span class="nav-number">34.9.</span> <span class="nav-text">$(“p”).unwrap()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“p”-wrapAll"><span class="nav-number">34.10.</span> <span class="nav-text">$(“p”).wrapAll()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“div”-wrapInner-““"><span class="nav-number">34.11.</span> <span class="nav-text">$(“div”).wrapInner(““)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“p”-replaceWith-““"><span class="nav-number">34.12.</span> <span class="nav-text">$(“p”).replaceWith(““)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#““-replaceAll-“p”"><span class="nav-number">34.13.</span> <span class="nav-text">$(““).replaceAll(“p”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“div”-empty"><span class="nav-number">34.14.</span> <span class="nav-text">$(“div”).empty()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“p”-remove"><span class="nav-number">34.15.</span> <span class="nav-text">$(“p”).remove()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“p”-detach"><span class="nav-number">34.16.</span> <span class="nav-text">$(“p”).detach()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“div”-clone-true-false"><span class="nav-number">34.17.</span> <span class="nav-text">$(“div”).clone(true/false)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#id的唯一性"><span class="nav-number">34.18.</span> <span class="nav-text">id的唯一性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es6-1"><span class="nav-number">35.</span> <span class="nav-text">es6</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#const-常量"><span class="nav-number">35.1.</span> <span class="nav-text">const 常量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解构赋值-1"><span class="nav-number">35.2.</span> <span class="nav-text">解构赋值</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es6字符串扩展"><span class="nav-number">36.</span> <span class="nav-text">es6字符串扩展</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#查询-返回布尔值"><span class="nav-number">36.1.</span> <span class="nav-text">查询(返回布尔值)</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#str-includes-str1-num"><span class="nav-number">36.1.1.</span> <span class="nav-text">str.includes(str1, num)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#str-startWith-str1-num"><span class="nav-number">36.1.2.</span> <span class="nav-text">str.startWith(str1, num)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#str-endWith-str1-length"><span class="nav-number">36.1.3.</span> <span class="nav-text">str.endWith(str1, length)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#p-Promise-all-new-Promise-new-Promise-new-Promise"><span class="nav-number">36.1.4.</span> <span class="nav-text">p = Promise.all([new Promise, new Promise, new Promise])</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#p-Promise-race-p1-p2-p3"><span class="nav-number">36.1.5.</span> <span class="nav-text">p = Promise.race([p1, p2, p3])</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#async函数"><span class="nav-number">36.2.</span> <span class="nav-text">async函数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM-document-object-model-文档对象模型"><span class="nav-number">37.</span> <span class="nav-text">DOM(document object model)文档对象模型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#节点有7个类型"><span class="nav-number">37.1.</span> <span class="nav-text">节点有7个类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#通过CSS选择器选取元素"><span class="nav-number">37.2.</span> <span class="nav-text">通过CSS选择器选取元素</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#文档结构的遍历"><span class="nav-number">38.</span> <span class="nav-text">文档结构的遍历</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Node属性："><span class="nav-number">38.1.</span> <span class="nav-text">Node属性：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#NodeList和HTMLCollection"><span class="nav-number">38.2.</span> <span class="nav-text">NodeList和HTMLCollection</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#文档的内容"><span class="nav-number">39.</span> <span class="nav-text">文档的内容</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#坐标、尺寸"><span class="nav-number">40.</span> <span class="nav-text">坐标、尺寸</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Document属性"><span class="nav-number">40.1.</span> <span class="nav-text">Document属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Document方法"><span class="nav-number">40.2.</span> <span class="nav-text">Document方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#execCommand（aCommandName-aShowDefaultUI-aValueArgument）"><span class="nav-number">40.3.</span> <span class="nav-text">execCommand（aCommandName, aShowDefaultUI, aValueArgument）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML属性"><span class="nav-number">40.4.</span> <span class="nav-text">HTML属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据集（dataset）属性"><span class="nav-number">40.5.</span> <span class="nav-text">数据集（dataset）属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#attribute属性是只读类数组对象，索引方式有多种"><span class="nav-number">40.6.</span> <span class="nav-text">attribute属性是只读类数组对象，索引方式有多种</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS"><span class="nav-number">41.</span> <span class="nav-text">CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#window-getComputedStyle"><span class="nav-number">41.1.</span> <span class="nav-text">window.getComputedStyle()</span></a></li></ol></li></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">shellingford ly</span>

  
</div>


  <div class="powered-by">
  <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>
  </div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info"> 
  <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">
  NexT</a>
  </div>




<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">33.7k</span>
</div>

        
<div class="busuanzi-count">
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    
      <div id="needsharebutton-float">
        <span class="btn">
          <i class="fa fa-share-alt" aria-hidden="true"></i>
        </span>
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: 'Cs5UqCDDJC5JezlK5wuzf2ql-gzGzoHsz',
        appKey: 'TC9fgcijHIjkjEwwCz6aQSJi',
        placeholder: '说点什么呢...',
        avatar:'monsterid',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  
  
  <link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css">

  
  
  <script src="/lib/needsharebutton/needsharebutton.js"></script>

  <script>
    
      pbOptions = {};
      
          pbOptions.iconStyle = "box";
      
          pbOptions.boxForm = "horizontal";
      
          pbOptions.position = "bottomCenter";
      
          pbOptions.networks = "Weibo,Wechat,QQZone,Facebook";
      
      new needShareButton('#needsharebutton-postbottom', pbOptions);
    
    
      flOptions = {};
      
          flOptions.iconStyle = "box";
      
          flOptions.boxForm = "horizontal";
      
          flOptions.position = "middleRight";
      
          flOptions.networks = "Weibo,Wechat,QQZone,Facebook";
      
      new needShareButton('#needsharebutton-float', flOptions);
    
  </script>

  

  

  

  

</body>
</html>
